文档：http://www.h-ui.net/lib/jQuery.lazyload.js.shtml
github地址：https://github.com/jieyou/lazyload
Lazy Load是一个用js编写的jQuery插件，用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载，没有滚动到的区域img标签上会有一个占位图片，而真实图片不会被载入。当页面比较长，图片比较多的时候，延迟加载图片可以加快页面加载速度，在某些情况下降低服务器负担。
使用方法
1、lazyload.js依赖jquery或者zepto.js。
引入jquery文件和lazyload.js文件
lazyload.js文件地址：http://lib.h-ui.net/lazyload/1.9.3/lazyload.js
2、将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如：lazyload，方便js调用。
<img class="lazyload" width="1000" height="60" data-original="//images.h-ui.net/www/AD-1000x60.gif" />
js调用
$(function() {
$("img.lazyload").lazyload()}
);
相关参数
| 属性 | 默认值 | 描述 | 备注 |
|---|---|---|---|
| threshold | 0 | 临界点 | 可以设置>0的数值，让图片距离屏幕一定像素时提前加载。 |
| failure_limit | 0 | 当图像不连续时 | 滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布。特殊布局请设高参数。 |
| container | window | 触发可滚动的容器 | 默认是浏览器的滚动条，也就是window。可以自定义带滚动条的 DIV 元素。如：$("#container") |
| event | scroll | 设置事件来触发加载 | click、mouseover可自定义事件 |
| effect | show | 载入特效 | fadeIn（淡入效果） |
| skip_invisible | true | 加载隐藏的图片 | 默认忽略了隐藏图片，可以设置为false加载隐藏图片 |
| placeholder | data:image/png;base64,iVBOR…… | 默认的占位图片 | 可以直接把占位的图片路径赋给img的src |
原文地址：https://www.cnblogs.com/pxblog/p/12585369.html
时间： 2024-10-10 23:34:56