关于网站图片太多,有许多需要用到下拉延迟加载
说下jq 延迟加载插件 lazyload 的使用
首先头部引入jq web读取从上到下,不这样下面的jq效果不生效啊!
然后 对需要处理的图片 吧src里面的地址剪切出来,放在 data-original=‘’ 里面, 比如:
<img class="lazy" data-original="./1.jpg" width="640" height="800">
注意: 第一张图片一定要有宽高。
最后在最底部引入lazyload插件, 并且对其进行调用:
$(function () {
$("img").lazyload();
});
其中一些条件,自己进行筛选了,比如:
threshold : 200 设置离下面200像素进行加载
event : "click" 设置触发条件
effect : "fadeIn" 使用效果淡出
failure_limit : 10 如果图片不连续,这样多搜索几个可见区域然后停止
skip_invisible : false 加载隐藏图片
本文介绍了一种利用jQuery LazyLoad插件实现图片延迟加载的方法,适用于网站中图片较多的情况,通过将图片的src属性替换为data-original属性,结合LazyLoad插件可以实现图片的按需加载,从而提高页面加载速度。

677

被折叠的 条评论
为什么被折叠?



