前段时间在做一个电商h5的页面,需要用到图片懒加载的技术,选择了jquery-lazyload的插件,开始我的填坑之路。
- 引入js文件, 需要引入jquery.js和jquery-lazyload.js 两个文件
- 设置图片路径data-original="xxx"及class名;
- 图片对象.lazyload();
<img data-original="xxx" class="lazy"/>
重点来了,懒加载的图片的src属性不用写,用lazyload里面的属性placeholder来添加,因为这个插件的内部机制就是判断img的src是否为空来判断该图片是否已经有加载过了,如果写了,有可能会导致重复加载图片资源。
<script src="jquery.js"></script>
<script src="jquery-lazyload.js"></script>
<script>
$(document).ready(function(){
$("img.lazy").lazyload({
placeholder:"loading.jpg", //图片未加载出来时显示的占位图
effect:"show", //展现的方式,常用:show显示\fadeIn闪现
threshold:180, //在距离屏幕多少px时开始加载
event:"scroll", //懒加载的触发事件,常用:click点击/mouseover鼠标移入/sporty运动/默认为scroll滑动
container:$("#main"), //指定容器内的元素产生效果
failure_limit:2 //加载多少张可见区域外的图片
});
})
</script>
实现大致原理:选中需要懒加载的图片元素,src先不放加载地址,又placeholder来动态添加,判断哪些图片是否在可是区域内,然后更改src地址,加载图片,加载前通过src是否为空或者是否为placeholder来判断是否已经加载过图片资源,如果加载过了就不会再次加载。
总结
- 图片src不用写
- 依赖jquery
- 需要在html结构加载完成后在执行lazyload()方法