js 实现图片懒加载

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

搬运自其他大神，因为找不到链接了就没放，找到了补上。

个人情况：页面超过一屏，下方是大量图片数据（后台传来的html数据），想做到一开始不加载下方图片，滚动到进入可视区再加载图片。

html:（需先引入jquery.js）

<div id="content"></div>

<script type="text/javascript">

·····

var str1 = response.message.mcontent;//获取后台数据
var str2 = str1.replace(/src/g, 'src="../images/img_loading.jpg" data-src');//将所有图片用默认的一张加载中图片显示，真实路径存入data-src属性中，
$("#content").html(str2);

</script>
<script type="text/javascript">
　　//先进行一次检查,预防顶部有图
　　window.onload = function(){ lazyRender(); }

//为了不在滚轮滚动过程中就一直判定，设置个setTimeout,等停止滚动后再去判定是否出现在视野中-函数节流防抖。

    var clock; //这里的clock为timeID，

    $(window).on('scroll',function () {

        if (clock) { // 如果在300毫秒内进行scroll的话，都会被clearTimeout掉，setTimeout不会执行。

                    //如果有300毫秒外的操作，会得到一个新的timeID即clock，会执行一次setTimeout,然后保存这次setTimeout的ID，

                      //对于300毫秒内的scroll事件，不会生成新的timeID值，所以会一直被clearTimeout掉，不会执行setTimeout.

            clearTimeout(clock);

        }

        clock = setTimeout(function () {

            lazyRender();

        },300)

    })

    function lazyRender () {

        $('#content img').each(function () {

            if (checkShow($(this)) && !isLoaded($(this)) ){

                loadImg($(this));

            }

        })

    }

    function checkShow($img) { // 传入一个img的jq对象

        var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离

        var windowHeight = $(window).height(); // 浏览器自身的高度

        var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置

        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的

            return true;

        }

        return false;

    }

    function isLoaded ($img) {

        return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了

    }

    function loadImg ($img) {

        $img.attr('src',$img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性

    }

</script>