当前位置:首页 > 网页设计 >Javascript >

给网站中图片实现一个懒加载的方法

发布时间:2019-06-05 20:05:31 作者:佚名 阅读:(163)

最近在优化一个网站,发现网站首页打开就需要19M,发现基本上都是图片加载的,于是打算给部分图片添加一个懒加载效果,从而减少一次性向服务器进行大量请求。接下来吾爱编程就介绍一下,有需要的小伙伴可以参考一下:

js代码如下:

if($('.lazy').size()>=0){
    $("img.lazy").lazyload({
        //placeholder : "images/loading.gif",
        effect : "fadeIn",
        threshold : 400
    });
}

html页面修改如下:

<li>
	<a href="http://www.itbiancheng.com/php/3844.html" target="_blank"> <img src="http://www.itbiancheng.com/uploadimg/ico/2018/0714/1531552253840661.jpg" class="lazy" /> 新秦时明月 </a> 
</li>

<li>
	<a href="http://www.itbiancheng.com/php/3844.html" target="_blank"> <img src="http://www.itbiancheng.com/uploadimg/ico/2018/0714/1531552321868361.png" class="lazy" /> 武林萌主 </a> 
</li>

还有一个最重要的就少要引入一个js文件:lazyload.js

欢迎分享转载→ 给网站中图片实现一个懒加载的方法

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们