浅析图片懒加载(三种实现方法与两种优化方式) | 您所在的位置:网站首页 › uniapp实现图片懒加载 › 浅析图片懒加载(三种实现方法与两种优化方式) |
浅析图片懒加载之三种实现方法与两种优化方式
写在前面在不使用图片懒加载的情况下,我们打开开发者工具康康什么是懒加载?懒加载的前两种实现方法(位置判断)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 images[i].setAttribute('src', images[i].getAttribute('data-src')) n = i + 1 } } console.log('scroll触发'); } 2.通过视口距离来判断 与上面的方法不同的是,我们不去管整体滚动了多少,图片相对于整体的offset位置是多少我们只去关心视口的距离getBoundingClientRect().top可以帮我们获得图片相对于视口距离顶部的距离window.innerHeight可以帮我们获得视口的高度(一般来说,对一个设备来说是一个固定值!) const images = document.querySelectorAll('img') let n = 0 let lazyload = (e) => { for (let i = n; i images[i].setAttribute('src', images[i].getAttribute('data-src')) n = i + 1 } } console.log('scroll触发'); } 3.两种距离判断方法的比较示意图为了更好地帮助大家理解这个判断的区别,我画了一个示意图 ![]() scroll多次监听事件多次触发,这是我们不愿意看到的 懒加载的两种优化方式 懒加载的优化本质上就是减少监听事件的调用 节流 在上一篇文章里面提到了节流,我们直接拿节流函数过来用 function throttle (fn, delay) { let pre = 0 let timer return function () { if (!pre) pre = new Date() let now = new Date() let context = this let args = arguments let remainTime = delay - (now - pre) if (now - pre > delay) { fn.apply(context, args) pre = now } else { if (timer) return timer = setTimeout(() => { fn.apply(context, args) pre = now timer = null }, remainTime) } } } window.onscroll = throttle(lazyload, 1000) 我们看控制台可以明显看到调用次数减少了虽然完成了所有的懒加载后,但是我们仍然可以触发事件,所以才有了第二种优化方式![]() ![]() |
CopyRight 2018-2019 实验室设备网 版权所有 |