原生js图片懒加载-即用

编码时要注意所有的img标签里的src属性都要写成_src
函数getPos是为了得到obj的定位父级的left和top值。

function getPos(obj){
    var l=0;
    var t=0;
    while(obj){
        l+=obj.offsetLeft;
        t+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return {left:l,top:t};
};
window.onload=window.onscroll=window.onresize=function(){
    var aImg=document.getElementsByTagName('img');
    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight=document.documentElement.clientHeight;
    for(var i=0; i<aImg.length; i++){
        var aImgTop=getPos(aImg[i]).top;
        if(scrollTop+clientHeight>=aImgTop){
            aImg[i].src=aImg[i].getAttribute('_src')
        }
    }
};

要注意加的事件有onload onscroll onresize后续代码冲突的话要做处理。可以用闭包来解决。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容