美文网首页让前端飞
原生js图片懒加载-即用

原生js图片懒加载-即用

作者: vikang | 来源:发表于2017-01-01 16:37 被阅读0次

编码时要注意所有的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后续代码冲突的话要做处理。可以用闭包来解决。

相关文章

  • 原生js图片懒加载-即用

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

  • 图片懒加载

    前端实现图片懒加载(lazyload)的两种方式 原生JS实现最简单的图片懒加载 30行Javascript代码实...

  • 原生js 图片懒加载

  • 原生js 图片懒加载

    1、使用方法 1、引入下面js2、在img添加 class="lazyloadimg" 类名,src 里面是默认图...

  • JS 原生图片懒加载

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 原生JS实现图片懒加载

    (1) 图片距离文档顶部的高度: img.offsetTop(2) 返回窗口文档显示区的高度: window.in...

  • 原生JS实现图片懒加载

    最近接的项目终于接近尾声,这段时间一直没有造轮子,在实现设计图还原的途中,发现还是有一些技术需要掌握,难者不会,会...

  • 原生 JS 实现图片懒加载

    1、什么是懒加载? 懒加载就是延迟加载的意思,比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不...

  • 原生js实现图片懒加载

    用多了懒加载插件,尝试一下自己撸一个,顺便了解其中原理和实现方法吧。 什么是懒加载 懒加载其实就是延迟加载,是一种...

网友评论

    本文标题:原生js图片懒加载-即用

    本文链接:https://www.haomeiwen.com/subject/fwdivttx.html