Javascript图片懒加载

graf 发布于2019-08-29 14:06 / 720人阅读

摘要：浏览器可视区域的高度即滚动条滚动的距离。需要手动调用一次方法，在页面刚的时候将已经在视窗内的图片加载出来。主题是懒加载嘛，后面有空了专门写一篇函数节流方法的文章。

原理

一开始将img标签的src设置为一张默认图片，将真实的图片地址放在data-src上，监听滚动事件，当图片进入可视区域时，写入src真实的图片地址。

如何判断图片进入了可视区域？

对于这样一个页面，图片即将进入页面的条件是：图片距离整个网页顶部的距离 < 浏览器可视区域的高度 + 滚动条滚动的距离。那么问题就可以分解成三个小点：

①图片距离整个网页顶部的距离；

可以通过下面这个方法获取某个元素到网页顶部的距离：

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

代码分析：
offsetTop表示的是元素距离父元素左上角顶点的高度，offsetParent则表示元素的父元素。通过不断遍历累加高度，就可以得到元素距离网页顶部的距离。

②浏览器可视区域的高度；

即window.innerHeight

③滚动条滚动的距离。

即document.documentElement.scrollTop

懒加载如何实现？

html代码如下：




    
    
    
    Document

这里只需要注意到开始时img标签的src属性放的是默认的图片，真正的图片地址放在了data-src中

css代码如下：

.wrapper {
    text-align: center;
}

img {
    display: block;
    margin: 10px auto;
}

js代码如下：

function lazyLoad () {
  let images = document.querySelectorAll("img");
  for(let i = 0; i < images.length; i++) {
    let image = images[i];
    if (getElementTop(image) <= window.innerHeight + document.documentElement.scrollTop) {
      image.src = image.getAttribute("data-src");
    }
  }
}

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

lazyLoad()；

window.onscroll =lazyLoad；

代码分析：
window.onscroll = lazyload表示在滚动条滚动时触发调用lazyLoad方法；

在lazyLoad方法中，先通过document.querySelectorAll("img");找到所有的Image（这里只是为了简化示例，实际场景中可以通过在需要懒加载的图片上添加统一的类名，然后通过querySelectorAll(".类名")来获取需要懒加载的图片),依次判断是否进入了可视区域内。如果进入了可视区域则做img标签的src的替换。

需要手动调用一次lazyLoad方法，在页面刚load的时候将已经在视窗内的图片加载出来。

函数节流

所谓的函数节流就是当事件触发的频率很高时，并不是每次都需要去调用相对应的处理函数，以此来提高性能。比如这里的滚动事件，假设我们希望至少间隔200ms才调用一次处理函数，那么可以新增一个方法

function throttle (delay, action) {
  let last = 0;
  return function () {
    let now = new Date();
    if (now - last > delay) {
      action();
      last = now;
    }
  }
}

然后将window.onscroll =lazyLoad；改成window.onscroll = throttle(200, lazyLoad)。这个函数在事件触发时，先去判断本次触发的时间和上次触发的时间的间隔，如果大于delay，则运行处理函数。

函数用到了闭包的原理来保存last这个变量，对于闭包简单的解释一下就是throttle这个函数在调用结束后，本来应该销毁掉其内部的last变量，但是由于返回的是一个函数，返回的函数内引用了last这个变量，因此last被一直保存在了内存中。

throttle这个方法还有很多可以优化的地方，不在这里展开了。主题是懒加载嘛，后面有空了专门写一篇函数节流方法的文章。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112917.html

图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
Javascript图片懒加载

摘要：浏览器可视区域的高度即滚动条滚动的距离。需要手动调用一次方法，在页面刚的时候将已经在视窗内的图片加载出来。主题是懒加载嘛，后面有空了专门写一篇函数节流方法的文章。原理一开始将img标签的src设置为一张默认图片，将真实的图片地址放在data-src上，监听滚动事件，当图片进入可视区域时，写入src真实的图片地址。如何判断图片进入了可视区域？ showImg(https://seg...

qc1iu 2019-08-01 18:16 评论0 收藏0
Javascript图片懒加载

摘要：浏览器可视区域的高度即滚动条滚动的距离。需要手动调用一次方法，在页面刚的时候将已经在视窗内的图片加载出来。主题是懒加载嘛，后面有空了专门写一篇函数节流方法的文章。原理一开始将img标签的src设置为一张默认图片，将真实的图片地址放在data-src上，监听滚动事件，当图片进入可视区域时，写入src真实的图片地址。如何判断图片进入了可视区域？ showImg(https://seg...

Jason_Geng 2019-08-21 18:23 评论0 收藏0
实现一个图片懒加载插件有多难？

摘要：一个简单的图片懒加载共涉及两个方面，约定我们首先需要给准备实施懒加载的元素添加指定的这里为同时将赋值给属性。源码地址插件完整版地址 m-lazyhttps://github.com/zhanyouwei... 欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。showImg(https://segmentfault.com/img/bVEk23?w=258&h=258...

darkbug 2019-08-19 17:55 评论0 收藏0