jQuery图片延迟加载插件jQuery.lazyload

jQuery图片延迟加载插件jQuery.lazyload

使用方法

引用jqueryjquery.lazyload.js到你的页面

 

 

html图片调用方法

为图片加入样式lazy  图片路径引用方法用data-original

js出始化lazyload并设置图片显示方式

 

在图片中也可以不使用 class="lazy",初始化时使用:

 

这样就可以对全局的图片都有效!

=======以下代码由 聆锾沐雨 提供=========

如果想提载入图片,可以使用 threshold 进行设置,

以上实例的含义是:在图片距离屏幕180px时提前载入:

 

========以下内容由 ?D丶мемοяy 提供===============

引入

 

路径依据实际目录来确定。

 

图片引用lazyload 方式

 

参数设置

相关参数

属性默认值描述备注
threshold0临界点可以设置>0的数值,让图片距离屏幕一定像素时提前加载。
failure_limit0当图像不连续时滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布。特殊布局请设高参数。
containerwindow触发可滚动的容器默认是浏览器的滚动条,也就是window。可以自定义带滚动条的 DIV 元素。如:$("#container")
eventscroll设置事件来触发加载click、mouseover可自定义事件
effectshow载入特效fadeIn(淡入效果)
skip_invisibletrue加载隐藏的图片默认忽略了隐藏图片,可以设置为false加载隐藏图片
placeholderdata:image/png;base64,iVBOR……默认的占位图片可以直接把占位的图片路径赋给img的src
 

觉得好的话记得打赏赞助小灰灰哦,小灰灰灰更有动力的,谢谢

小灰灰

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: