美文网首页
原生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);
        }

相关文章

  • 图片懒加载

    前端实现图片懒加载(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图片懒加载-即用

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

  • 原生 JS 实现图片懒加载

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

  • 原生js实现图片懒加载

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

网友评论

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

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