浅析图片懒加载(三种实现方法与两种优化方式)

浅析图片懒加载之三种实现方法与两种优化方式

• 写在前面
• 在不使用图片懒加载的情况下,我们打开开发者工具康康
• 什么是懒加载/li>
• • 懒加载的前两种实现方法(位置判断)
  • • 1.通过整体距离来判断
    • 2.通过视口距离来判断
    • 3.两种距离判断方法的比较示意图
• 为什么要优化懒加载
• • 懒加载的两种优化方式
  • • 节流
    • IntersectionObserver(第三种实现方法,同时是第二种优化方式)
• 最后,我们看一下优化后懒加载能提高多少性能
• 总结

写在前面

上一篇文章介绍了，那么今天我们就来康康图片懒加载(中间会涉及到的优化问题)

你将了解到的实现的三种方法(整体位置比较和视图位置比较和)

和优化的两种方式(和)

写得不对的地方，希望大家能够批评指正！

在不使用图片懒加载的情况下,我们打开开发者工具康康

• 这里给是为了让图片变成块元素，这样图片会自己换行，这样更方便后面进行懒加载的操作
• 注意勾选，和，这样效果更加明显

• 我们很容易看出，由于图片的加载时间很长，首屏的渲染用了完成
• 下面我们就来看看懒加载和懒加载的优化吧！
• 康康最后通过优化能提升多少性能！

什么是懒加载/h2>

这里就来介绍一下懒加载

• 简单来说，就是懒惰的加载
• 在首屏渲染，如果我的可视区域里面看不到图片，那就先不加载图片
• 这种合理的偷懒就是懒加载，它大大缩减了首屏的渲染时间

懒加载的前两种实现方法(位置判断)

• 获取图片元素，图片的属性改为，即属性为空

• 添加滚动事件监听，判断图片位置和当前位置来给赋值，从而达到了动态加载图片的效果
• 这个距离的判断又有大概两种，下面来分析一下

1.通过整体距离来判断

• 通过下图，我们可以知道
  • 一个图片元素的位置的顶部可以用属性获得
  • 如果把换成文档对象，就可以表示滚动距离的最下端
  • 故的时候我们就要改变图片的了
  • 注意上面的和后面的是针对不同的元素哦，前者是图片，后者是文档对象

  为什么要优化懒加载

  • 在前面的懒加载函数中，我们写了一个

  声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！