懒加载的原理及插件

2016-10-26 wilsonIs 更多博文 » 博客 » GitHub »

原文链接 https://wilsonis.github.io/blog/posts/lazyload
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

懒加载也称为延迟加载,即在需要的时候才加载。

1. 懒加载的实现原理

图片懒加载的思路:

  1. 提前设定好图片的宽、高(或用默认图片占位)

  2. 不设置图片的src属性，把图片的地址存储到data-src属性里

  3. 判断当前屏幕的位置，把当前屏幕内的图片的src属性设置为data-src的值

2. 图片懒加载的代码

<script>
    var sh = window.innerHeight;//获取屏幕的高度
    var imgs = document.querySelectorAll("img");//获取图片
    window.onscroll = lazyLoad;//滚动鼠标执行懒加载

    lazyLoad();//初始加载

    function lazyLoad(){
        var st = document.documentElement.scrollTop||document.body.scrollTop;//获取滚动的top坐标
        var sn = st+sh;//屏幕的可视区域

        for(var i = 0; i<imgs.length;i++){
            if(imgs[i].offsetTop<=sn){
                imgs[i].src = imgs[i].getAttribute("data-src");
            }
        }
    }
</script>

3. 懒加载插件jquery.lazyload.js

懒加载插件下载地址：lazyload

懒加载插件实现方法

使用jquery懒加载插件，需在html中使用属性data-original来预加载src属性。

<script>
    $("img").lazyload({
        effect:"fadeIn",//淡入效果
    })
</script>

懒加载的实现的原理很简单，使用插件的话更加的easy。在资源较多、需要加载的数据较大的时候可以考虑使用懒加载来实现较好的页面浏览效果。