用new Image加载的图片如果不加载到页面上和加载到页面上缓存方式是否会有区别？
var img = new Image();
img.onload = () => {
console.log('loaded')
}
img.src = 'https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg'用如上代码缓存的图片为什么会在背景图片用到同样图片时重新请求？
首先贴下部分实验代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.world{
background: url('https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg');
width: 200px;
height: 200px;
background-size: 100% 100%;
}
.box{
display: none;
}
.a{
display: none;
}
.btn{
background: white;
}
</style>
</head>
<body>
<div class="hello " id="div">
</div>
<div class="a" id="a">
</div>
<button id="btn">Click</button>
<script>
window.onload = () => {
var btn = document.getElementById('btn');
var div = document.getElementById('div')
btn.addEventListener('click', () => {
div.classList.toggle('world')
})
var img = new Image();
img.onload = () => {
console.log('loaded')
}
img.src = 'https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg'
}
</script>
</body>
</html>以下是该代码的http包
理论上来讲预加载缓存后只有一个http请求
但是连续几次的实验结果居然不一样
实验方式如下：
抓包开preserve log
清缓存
刷新然后等一段时间点click 再刷新再等一会儿事件点click 反复多次
————————分割线————————————————————————————————————————
说明：我发现用这种方式加载图片，之后的相同图片还是会向服务器重新请求
我的操作方式如下：
1、new Image进行图片预加载
2、预加载之后给一个div添加类，该类代码如下：
.world{
background: url('https://b-ssl.duitang.com/uploads/item/201807/06/20180706150531_zFhZJ.thumb.700_0.jpeg');
width: 200px;
height: 200px;
background-size: 100% 100%;
}为什么背景图片不直接读取new Image预加载的图片呢？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这个其实要看服务器设置和浏览器设置，如果设置是不缓存，则每次请求都还会去请求。