jQuery Lazy Load 图片延迟加载来源

基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。

对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。

版本:
jQuery v1.4.4+
jQuery Lazy Load v1.7.2

注意事项:

1.需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。

【options 参数说明】

名称 默认值 说明
threshold 0 灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit 0 容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。
event "scroll" 触发加载的事件 [Demo]
effect "show" 加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。 [Demo]
effectspeed undefined 动画时间。作为 effect 的参数使用:effect(effectspeed)
container window 父容器。延迟加载父容器中的图片。 [Demo1] [Demo2]
data_attribute "original" 真实图片地址的 data 属性后缀
skip_invisible true 跳过隐藏的图片。图片不可见时(如 display:none),不强制加载。
appear null 图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)。[Demo](参考 DEMO 的源代码)
load null 图片加载后的事件 (Function),有 2 个参数,同 appear 。[Demo](参考 DEMO 的源代码)

【使用方法】

载入 JavaScript 文件

<script src="js/jquery.js"></script>  <script src="js/jquery.lazyload.js"></script>  

修改 HTML 代码中需要延迟加载的 IMG 标签

<!--  将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片)  添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器  添加 width 和 height 属性有助于在图片未加载时占满所需要的空间  -->  <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">  

调用 Lazy Load

$("img.lazy").lazyload();

Lazy Load 图片延迟加载(转)的更多相关文章

  1. jQuery Lazy Load 图片延迟加载

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

  2. lazy load 图片延迟加载 跟随滚动条

    http://plugins.jquery.com/lazyload/ Jquery.LazyLoad.js插件参数详解: 1,用图片提前占位 placeholder : "img/grey ...

  3. jQuery Lazy Load图片懒加载

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

  4. JS实现移动端图片延迟加载

    图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...

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

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

  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延迟加载插件(Lazy Load)详解

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

  9. Ionic 3 延迟加载(Lazy Load)实战(一)

    本文分享并演示了在 Ionic 3 框架中如何进行模块的延迟加载(Lazy Load)开发. 在我的实战课程「快速上手Ionic3 多平台开发企业级问答社区」中,因为开发的仿知乎 App 模块间的加载 ...

随机推荐

  1. [原]Unity3D深入浅出 - 常见三维软件与Unity3D的单位比例

    Unity3d系统默认单位是米 Maya:Unity3D  1M:100M 3DMax:Unity3D 100M:1M Cinema 4D:Unity3D 1M:100M Lightwavew:Uni ...

  2. 解决IIS6.0不能下载EXE文件之妙方!

    2003系统 IIS6建站 有EXE文件下载 但老是不让下载.当我把站删除再建后可以下载,但过一会又不让下载了.另,MIME里有EXE这项!请问这是为什么?应如何处理? 答案: win2003服务器允 ...

  3. 【转】Android.mk文件语法规范(Android.mk File)

    原文网址:http://blog.csdn.net/smfwuxiao/article/details/8530742 1.Android.mk文件概述 Android.mk文件用来告诉NDK编译系统 ...

  4. ie 提示浏览器升级信息 干掉ie

    <!--[]> <div id=</a> 或以下浏览器: <a href="http://www.mozillaonline.com/"> ...

  5. 你知道C/S和B/S两种架构有什么区别吗?

    C/S和B/S,是再普通不过的两种软件架构方式,都可以进行同样的业务处理,甚至也可以用相同的方式实现共同的逻辑.既然如此,为何还要区分彼此呢?那我们就来看看二者的区别和联系. 一.C/S 架构     ...

  6. java web工程发布以及解决tomcat闪退

    1.tomcat闪退 a.环境变量错误 startup.bat最后假如PAUSE进入调试状态,双击startup.bat,可以看到错误,根据错误提示设置相应的环境变量,JAVA_HOME等. b.ec ...

  7. 如何写出性能好的sql

    开发人员是很少注意SQL对数据库性能影响的重要性的,大多程序员都会认为SQL是比较简单的,需要的时候查查手册就可以了,很少有深究的. 这样的观念对大型系统的开发是致命的,需要纠正这样的观念. 造成这样 ...

  8. Gym 100827G Number Game (博弈)

    Number Game Alice and Bob are playing a game on a line of N squares. The line is initially populated ...

  9. keil中的存储模式

    存储模式 存储模式决定了默认的存储器类型此存储器类型将应用于函数参数局部变量和定义时未包含存储器类型的变量你可以在命令行用SMALL COMPACT和LARGE参数定义存储模式,定义变量时使用存储器类 ...

  10. ST-Link 驱动安装

    电脑中可以预先安装一个ST Visual Programmer 这个直接带STLink驱动或是安装一个STM32 ST-Link Uitilty 然后选择自安安装 点出下一步 在弹出的对话框选择“仍然 ...