LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。
如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下:
html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
js:$(function() {
$("img.lazy").lazyload();
})
这会将所有图进行延迟加载
设置临界点
默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold,这个属性的单位是px,不过赋值的时候不用带px ,呵呵。
设置事件来触发加载
$("img.lazy").lazyload({
event : "click"
});
使用特效
$("img.lazy").lazyload({
effect : "fadeIn"
});

jquery lazy load的更多相关文章

  1. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  2. jQuery Lazy Load图片懒加载

    传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...

  3. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  6. 延迟加载图片的 jQuery 插件:Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  8. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  9. jquery的load和get的区别

    jquery的load把返回的数据放到指定的元素中,不是全局函数:jquery的get把返回的数据交给用户处理,是全局函数. load和get同样是jquery的ajax函数,load的实现,几乎等于 ...

随机推荐

  1. 本机是wifi,虚拟机无法连接外网问题

    1.首先看自己本机的各网口是否都启动. 2.在虚拟机中的虚拟网络编辑器中,选择桥接模式,并选择对应第一步的WLAN端口. 3.在虚拟机设置中选择自定义,选择第二部中选的VMnet2即可上网了.

  2. Win10 Store 还原

    Get-AppxPackage -allusers | Select Name, PackageFullName Add-appxpackage -register "C:\Program ...

  3. mysql 8.0 密码加密方式的坑

    问题:新安装好MySQL 8.0和Navicat之后,连接时总是报: 1251 Client does not support authentication protocol requested by ...

  4. 微信小程序,转盘抽奖

    微信小程序大转盘 代码源码:https://github.com/yewook/Lottery-turntable

  5. noi2018还没想好记

    前面说点什么.. 没想到吧 嘴上说着不写的彩笔博主最后还是写了这篇东西.. Day -inf 在雅礼集训,打了四场模拟赛.. 真正说打得好的.. 也就那么一场 身体很差 心态很差 状态很差 虽然有书读 ...

  6. MySQL之爱之初体验

    写在前言:本篇博客从mysql的安装开始说起,至于什么是数据库以及数据的由来什么的,不在详谈!!! 第一:mysql安装 linux安装:两种方式 1.apt安装 apt install mysql- ...

  7. 你不知道的JS之作用域和闭包(四)(声明)提升

    原文:你不知道的js系列 先有鸡还是先有蛋? 如下代码: a = 2; var a; console.log( a ); 很多开发者可能会认为结果会输出 undefined,因为 var a 在 a ...

  8. 无需sendmail:巧用LD_PRELOAD突破disable_functions

    *本文原创作者:yangyangwithgnu,本文属FreeBuf原创奖励计划,未经许可禁止转载 摘要:千辛万苦拿到的 webshell 居然无法执行系统命令,怀疑服务端 disable_funct ...

  9. java实现注册的短信验证码

    最近在做只能净化器的后台用户管理系统,需要使用手机号进行注册,找了许久才大致了解了手机验证码实现流程,今天在此和大家分享一下. 我们使用的是榛子云短信平台, 官网地址:http://smsow.zhe ...

  10. boot+Xss防攻击的处理方案

    以下是boot+Xss防攻击的(解决处理JSON入参)处理方案,第二个亲测有效 https://www.jianshu.com/p/3e4b00b8ff3ahttps://www.jianshu.co ...