简单懒加载~


<pre>`
<script>
judge()
var clock; //首先买个闹钟
$(window).on('scroll',function(){ //滚的时候处罚
if (clock) { //如果有闹钟————炸了
clearTimeout(clock)
}
clock = setTimeout(function(){ //买一个,定时半秒后爆炸
console.log(1) //打印1(多余测试)
judge() //执行函数
},500)
})

function judge() {                                              
    $('.container img').each(function(){
            if ( isShow($(this)) && !isLoad($(this)) ) {    // 1.是否显示在视窗 2.是否已加载
                toLoad($(this))                             // 3.加载它.
            }
    })

    function isShow($img) {                             
        var scrollTop = $(window).scrollTop()               //滚动条高度~
        var windowHeight = $(window).height()               //窗口高度(浏览器)
        var offsetTop = $img.offset().top                   //目标偏移高度
        return ( offsetTop < scrollTop + windowHeight && offsetTop > scrollTop)
    }                                                       //目标偏移高度大于滚动条高度..原因(有隐藏的BODY上部分)
                                                            //目标偏移高度小于滚动条高度 + 窗口高度 .这种情况意味出现在视野里
    function isLoad($img) {
        return ( $img.attr('src') === $img.attr('data-src') )// 是否已经加载~
    }

    function toLoad($img) {
        $img.attr('src',$img.attr('data-src'))              //  加载
    }
}

</script>
`</pre>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容