图片是否产生请求

202 阅读1分钟

基于以下HTML结构,判断浏览器会发送多少个图片请求?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#bg{
			background-image: url('images/bg.png');
		}
		#test {
			background-image: url('images/abc.png');
			display: none;
		}
	</style>
</head>
<body>
	<div id="test"></div>
	<img src="img/abc.png" alt="">
	<img src="img/abc.png" alt="" style="visibility: hidden;">
</body>
</html>
//  3个
不产生请求 产生请求
img标签 把图片地址设置为不存在的属性
如data-src=""
设置了src属性
(无论display:none还是visiblity:hidden;)
图片背景 display:none;或者visibility:hidden; 可见
JS的new Image() var el = document.createElement("div");
el.innerHTML = "<img src="img/abc.png" alt="">";//产生请求

new Image().src = "img/abc.png";//也产生请求