美文网首页
js图片延时加载

js图片延时加载

作者: liudai123 | 来源:发表于2017-10-20 18:09 被阅读11次

    简单的js图片延时加载

    var wh = window.innerHeight;  // 获取屏幕高度

    var imgs = document.getElementsByTagName("img"); // 获取所有图片

             // 滑动屏幕时,执行加载图片的操作

            window.onscroll = function() {

               for (var i = 0; i < imgs.length; i++) {

                     var imgTop = imgs[i].getBoundingClientRect().top;// 获得图片相对于屏幕视窗顶部的距离

                      if (wh >= imgTop) {

                         // 如果距离小于等于屏幕的高度,也就是图片已经可见,那就替换对应的实际图片地址

                          imgs[i].setAttribute("src", imgs[i].getAttribute("data-src"))

                     }

            }

    }

    相关文章

      网友评论

          本文标题:js图片延时加载

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