jquery实现图片懒加载imgLazyLoad()
  • 分享到微信朋友圈
    X
立即下载 查看演示

为什么要图片懒加载， 当一个页面图片数量多，而且比较大，少说百来K，多则上兆的时候。 要是页面载入就一次性加载完毕。 就会非常慢。所以，我们得做点什么，避免这种糟糕的状况发生。 目前很流行的做法就是滚动动态加载， 显示屏幕之外的图片默认是不加载的，随着页面的滚动， 这个要显示图片的区域进入了浏览器可是窗口范围，则触发图片的加载显示。 这种做法的好处是，一是页面加载速度快，二是节约了流量，因为不可能每个用户浏览页面时从头滚到尾的。

那么如何使用jquery实现图片懒加载呢？

首先要书写css代码

css代码

<style>
    img.lazy
    {
        visibility: visible;
        opacity: 0.00;
        filter: alpha(opacity=0);
        -moz-opacity: 0.0;
    }
</style>

html代码

将img标签内的src属性修改为data-original， 给img标签添加 class = "lazy" 属性；

关键js代码与说明

<script>
    $(function () {
        imgLazyLoad(); //初始化
        $(document).scroll(imgLazyLoad); //当滚动条滚动时,扫描需要加载的div

        //扫描需要加载的div
        function imgLazyLoad() {
            $.each($("body img.lazy"), function (i, o) {
                //获取窗口高度
                var windowHeight = $(window).height();  //windowHeight = windowHeight/2; 设置滚动条在显示屏幕高度2分之1的时候加载图片
                //获取滚动条
                var scrollTop = $(document).scrollTop();
                //先判断是否是加载完的图片 跳出
                if ($(o).attr("src") == $(o).attr("data-original")) {
                    return true;
                } else if ($(o).offset().top <= (scrollTop + windowHeight) && $(o).offset().top >= scrollTop) {//判断div是不是出在可见的位置
                    if ($(o).attr("data-original") != undefined || $(o).attr("data-original") != "undefined") {
                        var ObjectSrc = $(o).attr("data-original");
                        //把pic的值赋给src值
                        $(o).attr("src", ObjectSrc);
                        //css属性改为可见
                        $(o).css("visibility", "visible");
                        //渐变时间和渐变值
                        $(o).fadeTo(1000, 1.00);
                    }
                }
            });
        }
    });
</script>