我有一个 div ，其中 display:none 作为 style 属性值。在css中，为这个div设置了一个背景图片url。我只是不想在稍后通过一些 JS 代码看到 div 之前触发对图像的请求。在 Firefox 中，网络选项卡显示请求未按预期发出。但在 Chrome 开发者工具中，我发现对图像的请求实际上是在 DOMContentLoaded 事件之后触发的。在这两种不同的浏览器中隐藏元素的不同行为的可能原因是什么？
标记:
<html>
<head>
<title></title>
<style type="text/css">
.remoteAudioSoundButton{
background: url("http://ourserverurl/images/image_lady.png");
width: 200px;
height: 200px;
border: 2px black;
}
</style>
</head>
<body >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton' style="display:none"></div>
<script type="text/javascript">
window.onload = function(){
console.log("inside onload");
};
</script>
</body>
</html>
屏幕截图:
Chrome:
火狐浏览器:
最佳答案
为什么不将背景添加到特定类别？这样，仅当特定类添加到元素时才会加载图像。
$(function(){
$('button').click(function() {
$('.remoteAudioSoundButton').toggleClass('visible');
});
});.remoteAudioSoundButton{
display: none;
width: 200px;
height: 200px;
border: 2px black;
}
.visible {
background: url("http://ourserverurl/images/image_lady.png");
display: block;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton'></div>
<button>Toggle Class</button>关于javascript - 隐藏 html 元素在不同浏览器中的不同行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28689873/