图片是否产生请求

最新推荐文章于 2020-11-05 16:15:19 发布

weixin_34293246

最新推荐文章于 2020-11-05 16:15:19 发布

阅读量117

点赞数

原文链接：https://juejin.im/post/5afd132cf265da0b767dac9c

版权

基于以下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";//也产生请求