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

2018-10-20     浏览次数:161

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

js代码如下:

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

html页面修改如下:

<li>
    <a href="/game/748.html" target="_blank">
        <img src="/uploadimg/ico/2018/0714/1531552253840661.jpg" class="lazy">
        新秦时明月
    </a>
</li>
<li>
    <a href="/game/744.html" target="_blank">
        <img src="/uploadimg/ico/2018/0714/1531552321868361.png" class="lazy">
        武林萌主
    </a>
</li>

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

*转载请注明出处,更多资料尽在 吾爱编程
返回吾爱编程首页