美文网首页
原生js 图片懒加载

原生js 图片懒加载

作者: 他大舅啊 | 来源:发表于2018-08-24 11:13 被阅读9次
    <img class="cover-image" src=" " data-src="http://img.weixin.bjhzkq.com/images/mb/mb_30.jpg" alt="...">
    
           var imgs = document.querySelectorAll('.cover-image');
            function getTop(e) {
                var T = e.offsetTop;
                while(e = e.offsetParent) {
                    T += e.offsetTop;
                }
                return T;
            }
    
            function lazyLoad(imgs) {
                var H = window.innerHeight;
                var S = document.documentElement.scrollTop || document.body.scrollTop;
                for (var i = 0; i < imgs.length; i++) {
                    if (H + S > getTop(imgs[i])) {
                        imgs[i].src = imgs[i].getAttribute('data-src');
                    }
                }
            }
    
            window.onload = window.onscroll = function () {
                lazyLoad(imgs);
            }
    

    相关文章

      网友评论

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

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