浅谈图片懒加载插件jquery-lazyload.js的一些坑

前段时间在做一个电商h5的页面，需要用到图片懒加载的技术，选择了jquery-lazyload的插件，开始我的填坑之路。

1. 引入js文件, 需要引入jquery.js和jquery-lazyload.js 两个文件
2. 设置图片路径data-original="xxx"及class名;
3. 图片对象.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()方法