JavaScript图片加载策略-优快云博客

本文讨论了JavaScript中处理图片加载的问题，特别是图片预加载技术。在网页加载时，由于图片加载时间较长，可能影响整体速度。预加载图片可以改善用户体验，确保页面内容尽快呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS中经常使用的创建img标签的方法

var  img = new  Image();
img.src = “ http://img0.imgtn.bdimg.com/it/u=1999746274,3629967018&fm=21&gp=0.jpg” //网络地址
img.onload = function{     //图片的加载事件  图片加载完成时调用
alert(“这是一张图片”);
}
document.body.appendChild(img);

在网页加载过程中,加载图片是一项让人很头疼的工作.一个页面中可能会存在多张图片,而图片的加载过程需要较长的时间,影响整体网页的加载效果,所以我们一般会对图片的加载进行一些简单的处理.

一.图片预加载

预加载的目的:

*1.浏览器有限使用缓存进行读取图片

* 2.当图片的数据源没有发生变化的时候,图片预加载解决了图片重复加载的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var imgArr = ["http://img0.imgtn.bdimg.com/it/u=2597800917,1485506091&fm=21&gp=0.jpg",
			"http://img5.imgtn.bdimg.com/it/u=3815519729,4011050692&fm=21&gp=0.jpg",
			"http://img3.imgtn.bdimg.com/it/u=563934796,1213307015&fm=21&gp=0.jpg",
			"http://img3.imgtn.bdimg.com/it/u=439044414,1464210663&fm=21&gp=0.jpg"];
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<script type="text/javascript">
			var oDiv = document.getElementById("div1");
			//所有图片都加载成功之后显示
			//利用数组装img标签
			var imgs = [];
			var count = 0;
			for(var i=0;i<imgArr.length;i++){
				//创建img标签
				var img = new Image();
				img.src = imgArr[i];
				img.onload = function(){
					count++;
					//如果图片加载完成,则将其装入数组
					imgs.push(this);
					if(count==imgArr.length){
					//遍历数组,显示图片
					for(var j = 0;j<imgs.length;j++){
						oDiv.appendChild(imgs[j]);
					}
				}
			}
			}
			
		</script>
	</body>
</html>

二.图片懒加载

懒加载:网页中有许多img标签,这些img标签的src指向了服务器地址,当浏览器从上向下读取的时候,src对应的网址会加载这张图片,但不会同时读取所有的图片,而是只加载用户可视范围内的图片,这个过程叫做懒加载.

懒加载的目的:

*1.避免一次请求过多的内容,加快网页加载速度

*2.提升页面有好度,提升SEO

*3.较少服务器压力

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 400px;
				height: 600px;
				background-color: gainsboro;
				position: absolute;
				top: 1000px;
			}
		</style>
	</head>
	<body>
		<img src="" date-src = "http://img0.imgtn.bdimg.com/it/u=856185076,339069836&fm=21&gp=0.jpg"/>						
		<script type="text/javascript">			
			var img = document.getElementsByTagName("img")[0];
			var imgOffSetTop = img.offsetTop;
			//屏幕的高度
			var height = document.documentElement.clientHeight;		
			console.log("height"+height)
			var distance = imgOffSetTop - height +300;
			var scrollValue = 0;
			window.onscroll = function(){
				//scrollTop滚动过去但是看不见的区域
				//offSetTop指的是图片距离网页顶部(top:0)的距离
								
				scrollValue = document.body.scrollTop;
				if(scrollValue>=distance){
					//getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字：
					var imgPath = img.getAttribute("date-src");
					img.src = imgPath;
				}
			}
			console.log(imgOffSetTop - height)
		</script>
	</body>
</html>

JS中加载图片问题