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>