vue图片懒加载原理和实现

67 阅读1分钟

原理分析

  • 先将img标签的src链接设为同一张图片(默认图片),当js监听到该图片进入可视窗口时,再将实际地址应用。

实现方法

  • 判断元素是否在可视范围 image.png
  • 对图片实现懒加载

image.png

  • 添加滚动监听 image.png

Vue插件实现代码

image.png