图片懒加载

最新推荐文章于 2024-05-10 15:47:34 发布

我小哥在学习

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量94

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_42060560/article/details/114067321

版权

图片懒加载

意义

在网页中，常常会需要用到图片，加载图片需要流量和时间；一般情况下浏览器解析html会从上往下依次加载<img src="xxx">的图片资源；如果图片数量过多则需耗费过多资源(比如电商、网商等)，且用户不一定会滚动网页去查看所有的图片，那未被看到的图片请求回来就会造成浪费。图片懒加载的意义是通过前端优化图片请求时机，“按需加载”，减少请求次数或延缓请求时间，减少服务器压力，给用户更好的体验

实现原理

给图片统一设置src路径(如src="xxx/loading.gif")，然后利用另一个属性设置真实的src路径(如data-src="xxx/load1.jpg")，在解析html的时候，先加载可视区域的图片，未可见区域的图片暂不请求，当页面滚动时，通过计算图片是否属于当前可视区域，是则设置src的值为data-src的值，实现图片显示

js 实现图片懒加载

实现代码

<!DOCTYPE html>
<html>
<head>
    <title>js实现图片懒加载</title>
    <style type="text/css">
        img{
            display: block;
        }
    </style>
</head>
<body>
	<img src="img/loading.gif" data-src="img/1.jpg">
	<img src="img/loading.gif" data-src="img/2.jpg">
	<img src="img/loading.gif" data-src="img/3.jpg">
	<img src="img/loading.gif" data-src="img/4.gif">
	<img src="img/loading.gif" data-src="img/5.jpg">
	<img src="img/loading.gif" data-src="img/6.jpg">
	<img src="img/loading.gif" data-src="img/7.jpg">
	<img src="img/loading.gif" data-src="img/8.jpg">
</body>
<script type="text/javascript">
	window.onload = function(){
		let img = document.getElementsByTagName('img')
		let imgArr = Array.from(img)
		let clientHeight = document.documentElement.clientHeight
		document.onscroll = scroll

		function scroll(){
			if(imgArr.length > 0){
				let scrollTop = Number(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop)
				imgArr.forEach((item,index) => {
					// 遍历数组，判断当前图片元素是否属于可视区域
					let imgTop = item.offsetTop
					if(imgTop < (clientHeight + scrollTop)){
						item.src = item.getAttribute('data-src')
						// 已设置真实的src后需将该元素删除
						imgArr.splice(index,1)
					}
				})
			}
		}
		// 先执行一次加载，显示可视区域的图片
		scroll()
	}
</script>
</html>

视频链接：js懒加载视频演示

Vue实现图片懒加载

实现步骤

安装vue-lazyload插件： npm install vue-lazyload --save-dev

在main.js文件中引入插件：

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
	error:require('./statics/img/error.jpg'),
	loading:require('./statics/img/loading.jpg')
})

在vue文件中将需要懒加载的图片绑定:src改为v-lazy="xxx"
```
<img v-lazy="xxx">
```

我小哥在学习

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载

图片懒加载意义在网页中，常常会需要用到图片，加载图片需要流量和时间；一般情况下浏览器解析html会从上往下依次加载<img src="xxx">的图片资源；如果图片数量过多则需耗费过多资源(比如电商、网商等)，且用户不一定会滚动网页去查看所有的图片，那未被看到的图片请求回来就会造成浪费。图片懒加载的意义是通过前端优化图片请求时机，“按需加载”，减少请求次数或延缓请求时间，减少服务器压力，给用户更好的体验实现原理给图片统一设置src路径(如src="xxx/loading.gif")，然后
复制链接

扫一扫