JS实现图片延迟加载（图片懒加载）

最新推荐文章于 2024-07-08 17:12:07 发布

艺术就是派大星220

最新推荐文章于 2024-07-08 17:12:07 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Rossbort/article/details/120268172

版权

本文探讨了为何需要实现图片的懒加载，以提高页面首次打开的体验。首先，不加载真实图片资源以加快页面渲染速度，然后在页面完全渲染后按需加载。进一步优化，仅加载首屏图片，滚动时再加载当前屏幕内的图片。文中详细介绍了实现步骤，并提及了window.onload事件用于在页面加载完成后加载图片，以及滚动事件用于动态加载。

摘要由CSDN通过智能技术生成

      1.为什么需要做图片的懒加载
       =>第一次加载页面的时候，如果请求真实图片资源，会减缓页面的渲染速度，为了提高首次打开的体验度，我们最开始不加载真实的图片资源(比如大小很小的背景图片)，只有当第一次页面整体都渲染完成后，页面中已经呈现出除图片以外的其它资源后，再去按需加载真实的图片资源渲染
       =>进一步优化，最开始只加载首屏需要的图片，等到滚动条滚动的时候，再把当前屏幕中需要渲染的图片加载（避免不必要的资源加载）

2.解决步骤

   1）给需要延迟加载的图片设置一个外层盒子，图片在这个盒子中
   2）我们把图片的SRC设置为空，把后续需要请求的真实图片地址赋值给IMG的自定义属性
   3）在最开始渲染的样式中
      ->给外层的盒子设置等待加载的背景LOGO（或者背景颜色，如果是背景图片，图片一定要非常的小，最好控制在5KB以内），让盒子起到一个占位的作用
      ->让所有的SRC为空的IMG默认是隐藏的
   4）需要等到页面加载完成后（除图片资源，其它资源都加载完成了 window.onload），在JS中获取真实图片的地址，赋值给其SRC（此时才去加载真实的图片进行渲染）

代码实现：第一次加载页面

<head>
	<style>
       /* img自带样式*/
		img:not([src]),
		img[src=""] {
			display: none
		}

		.lazyImgBox {
			box-sizing: border-box;
			width: 300px;
			height: 500px;
			background: url("images/default.gif") no-repeat center center #DDD;
		}

		.lazyImgBox img {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<div class="lazyImgBox">
		<img src="" alt="" data-image="images/1.jpg">
	</div>


	<!-- IMPORT JS -->
	<script>
		var lazyImgBox = document.querySelector('.lazyImgBox'),
			img = lazyIm