浅析图片懒加载(三种实现方法与两种优化方式) |
您所在的位置：网站首页 › 图片懒加载原理及实现 › 浅析图片懒加载(三种实现方法与两种优化方式) |
浅析图片懒加载(三种实现方法与两种优化方式)
|
浅析图片懒加载之三种实现方法与两种优化方式
写在前面在不使用图片懒加载的情况下,我们打开开发者工具康康什么是懒加载？懒加载的前两种实现方法(位置判断)1.通过整体距离来判断2.通过视口距离来判断3.两种距离判断方法的比较示意图
为什么要优化懒加载懒加载的两种优化方式节流IntersectionObserver(第三种实现方法,同时是第二种优化方式)
最后,我们看一下优化后懒加载能提高多少性能总结
写在前面
上一篇文章介绍了防抖和节流，那么今天我们就来康康图片懒加载(中间会涉及到节流的优化问题) 你将了解到图片懒加载的实现的三种方法(整体位置比较和视图位置比较和observe) 和优化的两种方式(节流和IntersectionObserver) 写得不对的地方，希望大家能够批评指正！ 在不使用图片懒加载的情况下,我们打开开发者工具康康 这里display给block是为了让图片变成块元素，这样图片会自己换行，这样更方便后面进行懒加载的操作注意勾选禁用缓存，和慢速3G，这样效果更加明显
这里就来介绍一下懒加载 简单来说，就是懒惰的加载明日复明日在首屏渲染，如果我的可视区域里面看不到图片，那就先不加载图片这种合理的偷懒就是懒加载，它大大缩减了首屏的渲染时间 懒加载的前两种实现方法(位置判断) 获取图片元素，图片的src属性改为data-src，即src属性为空 添加滚动事件监听，判断图片位置和当前位置来给src赋值，从而达到了动态加载图片的效果这个距离的判断又有大概两种，下面来分析一下 1.通过整体距离来判断 通过下图，我们可以知道 一个图片元素的位置的顶部可以用offsetTop属性获得如果把div换成文档对象，scrollTop+clientHeight就可以表示滚动距离的最下端故offsetTop { const clientHeight = document.documentElement.clientHeight const scrollTop = document.documentElement.scrollTop for (let i = n; i { entries.forEach(entry => { console.log(entry) if (entry.isIntersecting) { // 监听到出现 const image = entry.target // 获取目标 image.setAttribute('src', image.getAttribute('data-src')) observer.unobserve(image) // 取消监听 console.log('触发'); } }) } const observer = new IntersectionObserver(callback) images.forEach(image => { observer.observe(image) }) 函数中log entry，我们主要是康isIntersecting属性来判断是否出现
通过这个优化方式，几张图片就会触发几次，不会多次触发！observer会监听交叉状态，即出现和消失，出现交叉状态后会去调用new的时候传入的callback回调函数
observer.observe添加交叉监听observer.unobserve取消交叉监听上面这两个api基本够用了给每张图片添加observecallback里面判断交叉出现，就给src赋值然后unobserve
最后,我们看一下优化后懒加载能提高多少性能
从第一次渲染加载5张图片变成了加载2张图片请求的总耗时从7s降到了6s从我自己实验打开，还是明显感觉到要快一些了的(当然是在3G慢速模式下) 
总结
1.前两种方法存在多次触发问题，所以我们可以使用节流来优化2.第三种方法自己就考虑的优化(所以第三种方法也就是第二种优化方式)3.咋一看，第三种方法是可以取代前两种方法的
但是，有的浏览器不兼容第三种方法的时候，我们就只能老老实实使用前两种方法并节流优化了
|
【本文地址】
今日新闻 |
推荐新闻 |