js实现图片懒加载

图片懒加载

现如今，网站载有的信息量越来越大，其中图片占据着很大一部分，这样一来可以使整个页以面图文结合的形式展现，更加美观。

然而问题来了，如果是一个图片列表页，虽然好看，但是相关图片的加载要耗费非常长的时间，等待图片一格一格的加载，实在让人抓狂，如何优化此类页面呢？

1.利用ajax技术将此类页面做成瀑布流
2.图片懒加载

综上所述，如果在没有ajax支持的情况下，图片懒加载是一个非常好的选择。

页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来（正所谓响应了党的号召：让一部分人先富起来，从而带动其他人富起来，最终实现共同富裕）。

给img的父级加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src')）。

·css部分

        *{margin:0;padding:0;}        ul{overflow:hidden;}        li{list-style:none;width:10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}        li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;}        li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}        img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;}
        @keyframes move{
            0%{                transform:rotateZ(0);
            }
            100%{                transform:rotateZ(360deg);
            }
        }
        @-webkit-keyframes move{
            0%{                -webkit-transform:rotateZ(0);
            }
            100%{                -webkit-transform:rotateZ(360deg);
            }
        }

这里用css3写了一个可以循环转动的loading，相关的制作方法，欢迎观看我的另一篇文章
不用设计，css制作各种loading……

·html部分

·js部分

    var oUl = document.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');    function createImg(obj){    var src = '';    if(obj.dataset.src){
        src = obj.dataset.src;
    }else{
        src = obj.getAttribute('data-src');
    }    if(obj.children.length <= 1){        var img = document.createElement('img');
        img.src = src;
        obj.appendChild(img);
    }
}    function getTop(obj){    var h = 0;    while(obj){
        h += obj.offsetTop;
        obj = obj.offsetParent;
    }    return h;
}    
window.onscroll = function(){    var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);    for(var i=0;i
demo在这,建议在手机端观看


作者：峰极天下
链接：https://www.jianshu.com/p/4f6ea540516a