原生JS实现图片懒加载(lazyload)

qianfeng 发布于2019-08-21 11:45 / 2323人阅读

摘要：前言图片懒加载也是比较常见的一种性能优化的方法，最近在用做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。，当前图片距离顶部的距离。

前言

图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。

实现原理

加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、雪碧图等；懒加载也是其中一种，主要原理是将非首屏的图片src设为一个默认值，然后监听窗口滚动，当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

具体代码

首先在渲染时，图片引用默认图片，然后把真实地址放在data-*属性上面。

然后是监听滚动，直接用window.onscroll就可以了，但是要注意一点的是类似于window的scroll和resize，还有mousemove这类触发很频繁的事件，最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法，这里先不多做介绍了。

接着要判断图片是否出现在了视窗里面，主要是三个高度：1，当前body从顶部滚动了多少距离。2，视窗的高度。3，当前图片距离顶部的距离。offsetTop相关属性可以参考这里，具体代码如下：

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {

  var bodyScrollHeight =  document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName("lazyloadimg");
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度  
    if (imgHeight  < windowHeight  + bodyScrollHeight) {
       imgs[i].src = imgs[i].getAttribute("data-src");
       img[i].className = img[i].className.replace("lazyloadimg","")
    }
  }
}

结语

大概内容就这么多了，下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断：
1.页面滚动离开首屏(这时可显示回到顶部的按钮):document.body.scrollTop > window.innerHeight
2.页面滚动到底部了(这时可去调接口获取更多内容)：window.scrollY + window.innerHeight > document.body.offsetHeight

云服务器 GPU云服务器 js实现数据的懒加载图片 js图片懒加载 js实现图片预加载 ionic js懒加载数据

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

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

原生JS实现图片懒加载(lazyload)

摘要：前言图片懒加载也是比较常见的一种性能优化的方法，最近在用做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。，当前图片距离顶部的距离。前言图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。实现原理加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、...

MangoGoing 2019-08-01 16:58 评论0 收藏0
原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）

摘要：接下来，我们需要利用对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。创建一个，配置元素和回调函数触发机制，这里我们将这个设为。点击查看视频教程哦！！！！ intersection Observer简介点击查阅MDN关于此api的使用说明这个api是用来检测dom元素交集的，常见的应用场景之一就是本文提到的对图片进行懒加载，即：...

shuibo 2019-08-23 15:05 评论0 收藏0
原生JS实现最简单的图片懒加载

摘要：原文地址原生实现最简单的图片懒加载欢迎。什么时候用懒加载当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设来表示图片到可视区域顶部距离并设来表示可视区域的高度。原文地址：原生JS实现最简单的图片懒加载欢迎star。如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyloa...

villainhr 2019-08-21 12:01 评论0 收藏0
Chrome 75 将原生支持图片的惰性加载

摘要：今天给大家带来好消息是，将原生支持图片的惰性加载，支持对和进行延迟加载，只需要将属性设置为即可。该属性支持标签，无论标签是否含有属性及被标签包裹，以及标签。随着浏览器性能的提升，前端也越来越关注用户体验，而影响用户体验其中一个很重要的指标便是受首屏渲染速度。我们常常会针对样式、脚本、图片、音频、视频等资源做处理，比如针对样式和脚本的压缩合并，将图片合并成雪碧图、将小图转化成base6...

luckyw 2019-08-23 16:54 评论0 收藏0