页面图片 “懒加载”

懒加载是很早很早的技术了,已经很成熟了,代码使用也很简单,这里就不啰嗦了,直接说如何快速使用!

1.js引入,由于懒加载是基于jquery的,因此页面必须引入jquery

<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

2.图片img标签的class 必须有lazy,默认的src改成data-original

<img class="lazy"  data-original="../img/1.jpg"  alt=""/> 

3.JS部分,控制懒加载的一些特性

$("img.lazy").lazyload({
	placeholder : "../img/logo.png", //预设图片,尚未加载时调用
	failurelimit : 10 ,一次载入数量
	effect: "fadeIn", // 载入使用何种效果
	threshold : 200, //距离屏幕200像素提前加载
	event : "click"//点击加载图片	    	
 });

这样就可以使用懒加载插件了,你网站图片很多很大,页面很卡,那么建议你可以引入这个插件!