JavaScript两个实用的图片懒加载优化方法
文章目录
- 一、方法一
- 二、方法二 InterSectionObserver
一、方法一
重点:
1.getBoundingClientRect().top > window.innerHeight 图片未出现
2.getBoundingClientRect().top < window.innerHeight 图片出现了
HTML:
<ul>......<li>2222222222</li><li>2222222222</li><li>2222222222</li><li>2222222222</li><li>2222222222</li><li>2222222222</li>/*先用data-自定义标签,使图片先不加载*/<img data-src="./img1.jpg" height="200px"><br><img data-src="./img2.jpg" height="200px" alt=""><br><img data-src="./img3.jpg" height="200px" alt="">
</ul>
JavaScript:
let img = document.querySelectorAll('img')
window.addEventListener('scroll',() => {img.forEach((item) => {//若图片顶部高度小于视窗高度if(item.getBoundingClientRect().top < window.innerHeight) {const data_src = item.getAttribute('data-src')//则将自定义属性data-src赋值给src属性item.setAttribute("src",data_src)} })console.log("scroll触发了"); //此方法:若加载很多内容,就会导致任务的堆积,影响整体效率
})
我们可以看到,虽然图片懒加载已经成功了,但是scroll事件仍在不断触发
,非常消耗资源,因此目前最推荐使用的方法还是IntersectionObserver
二、方法二 InterSectionObserver
重点:
1.observer.observe(DOM节点) 观察哪个DOM节点
2.observer.unobserve(DOM节点) 取消观察某DOM节点
3.callback目标能看见触发一次;目标元素看不见了又触发一次
HTML如上
JavaScript:
let img = document.querySelectorAll('img')//此回调:目标能看见触发一次;目标元素看不见了又触发一次
const callback = (entries) => { //接收一个数组作为参数,数组每一项都和目标元素相关,比如 isIntersecting判断目标元素是否被观察到了,又比如target属性代表该目标元素entries.forEach((item) => {//若该目标元素被观察到了if(item.isIntersecting) {const img = item.target //目标元素const data_src = img.getAttribute('data-src')img.setAttribute('src',data_src)observer.unobserve(img) //observer.unobserve(DOM节点) 取消观察某DOM节点}console.log('触发');})
}const observer = new IntersectionObserver(callback)
//遍历所有img,使得所有img被观察
img.forEach((item) => {observer.observe(item) //observer.observe(DOM节点) 观察哪个DOM节点
})
思路:
- new一个观察实例,并通过观察实例身上的observe属性观察每一个图片。
- 定义callback回调函数,设置 目标图片出现时改变属性
此时我们看到,当所有图片都懒加载完之后(observe取消观察DOM节点),scroll事件就不再触发*
JavaScript两个实用的图片懒加载优化方法相关推荐
- vue中实现图片懒加载的方法(一)
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义 图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
- jQuery 图片懒加载的方法 以及用$('.lazyImg').each()出错的地方,记录一下~
我高小莫,今天在这里发誓,如果以后能不用jQuery 的我绝不再用,做习惯了前后端分离的项目,再次回到jQuery ,发现异常的恶心~~~~· 不怪谁,怪就怪当初我,选择项目架构的时候为了省力,竟然选 ...
- vue 图片拖动加载 类似于地图_前端性能优化之图片懒加载(附vue自定义指令)...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
- layui图片懒加载-loading占位图
前言 使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use('flow' ...
- 图片懒加载以及数据懒加载
当一个单页面应用加载发送的请求很多时,页面可能会出来的很慢影响用户体验,此时我们就可以对项目进行优化,使用数据懒加载以及图片懒加载优化网络性能.懒加载的原理是当组件对象或者Dom对象出现在可视区域的时 ...
- js 图片懒加载最好的方法
图片懒加载多种方法 第一种 是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
- 【面试题】图片懒加载
是什么? 图片懒加载是前端页面优化的一种方式,根据图片是否出现在可视区域的范围内进行相应图片的请求显示(结合滚动加载). 为什么? 如果页面中需要显示很多图片的时候,当我们一味地使用<img&g ...
- java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
- 按需加载图片(图片懒加载)
前言 按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量.对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少. 原理 ...
最新文章
- error_reporting()
- JavaScript解析顺序和变量作用域
- python解码base64_在python中解码Base64 Gzip
- 【java学习笔记】浅析JavaWeb开发中Model1模式和Model2模式
- mybatis 中 Example 的使用 :条件查询、排序、分页(三种分页方式 : RowBounds、PageHelpler 、limit )
- 天池 在线编程 寻找字母(计数)
- GitBash添加tree命令
- 计算机必修课程英语单词,《计算机专业英语》课程标准.doc
- qt制作位图led点阵_LED显示屏知识详细讲解
- 如何做好一位合格qc_如何做好一个合格的热缩产品
- 贝叶斯统计(Bayesian statistics) vs 频率统计(Frequentist statistics):marginal likelihood(边缘似然)
- Ubuntu 对比度调节
- Visio2016 安装教程
- 宝马和戴姆勒冻结自动驾驶合作项目
- fzu 2122 又见LKity
- linux OS与SQL修改时区,系统时间
- C语言 母牛生小牛问题 多组测试数据
- html语言怎么在虚线中加字,html – 用CSS添加虚线spacer / infill
- ARM到底是冯诺依曼结构还是哈佛结构
- 卡马克快速平方根(平方根倒数)算法(转)