HTML图片懒加载

现在的网站越来越花哨, 图片加载越来越多, 这样加载速度就会越来越慢了, 因此, 图片懒加载就很流行咯~

1. 把img标签中的src属性删掉, 此时, 添加属性 data_src, 把图片链接放在该属性下

2. 通过使用img标签添加背景图片, 充当懒加载前的显示图片

3. 当该img标签在浏览器显示区内时, 通过js实现把img标签 中的data_src的链接赋值到img标签中的src属性

注: 浏览器显示区如何判断

JS code

<script>
    // 页面懒加载 
    function loadlazy() { 
        var itv = setTimeout(function() { 
            var winHeight = $(window).height(); 
            var scrolltop = $(window).scrollTop();
            $(\'.lazyload-img\').each(function() { 
                var oTop = $(this).offset().top; 
                if((oTop - scrolltop) >= 0 && (oTop - scrolltop) < winHeight) { 
                    var src = $(this).attr("data_src");
                    $(this).attr("src", src); 
                } 
            }) 
        }, 100);
    } 
    // 页面滚动加载
    $(window).scroll(function(){ 
        loadlazy(); 
    })
    // 页面加载完成
    $(function(){
        loadlazy();
    })
</script>