您现在的位置是:群英 > 开发技术 > web开发
JS中图片加载优化方法是什么,有哪些
Admin发表于 2022-05-26 17:13:18921 次浏览
这篇文章给大家分享的是“JS中图片加载优化方法是什么,有哪些”,文中的讲解内容简单清晰,对大家学习和理解有一定的参考价值和帮助,有这方面学习需要的朋友,接下来就跟随小编一起学习一下“JS中图片加载优化方法是什么,有哪些”吧。

一、方法一

重点:

  • 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事件就不再触发*


以上就是关于JS中图片加载优化方法是什么,有哪些的介绍,本文内容仅供参考,有需要的朋友可以借鉴了解看看,希望对大家学习或工作,想要了解更多欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

相关信息推荐
2022-05-10 14:29:11 
摘要:在php中,可以利用str_pad()函数来返回四位数,不满四位补零,语法“str_pad($num,4,"0",STR_PAD_RIGHT)”;参数“STR_PAD_RIGHT”指定在数字字符串的右侧补零。
2022-05-16 11:30:11 
摘要:Node(节点)和Element(元素)有什么区别?下面本篇文章给大家介绍一下Node 和 Element 的区别,希望对大家有所帮助!
2021-11-24 17:53:33 
摘要:这篇文章给大家分享的是关于python type()如何创建类的内容。小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部