Javascript 不同浏览器中隐藏html元素的不同行为_Javascript_Html_Css_Google Chrome_Firefox

Javascript 不同浏览器中隐藏html元素的不同行为

javascript html css google-chrome firefox

Javascript 不同浏览器中隐藏html元素的不同行为,javascript,html,css,google-chrome,firefox,Javascript,Html,Css,Google Chrome,Firefox,我有一个div，其中display:none作为style属性值。在css中，为该div设置背景图像url。我只是不希望在稍后通过一些JS代码看到div之前触发对图像的请求。在Firefox中，“网络”选项卡显示未按预期发出请求。但是在Chrome开发者工具中，我发现对图像的请求实际上是在DOMContentLoaded事件之后触发的。在这两种不同的浏览器中，隐藏元素的不同行为的可能原因是什么标记： <html> <head> <title><

我有一个

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>


.remoteAudioSoundButton{
背景：url（“http://ourserverurl/images/image_lady.png");
宽度：200px；
高度：200px；
边框：2件黑色；
}
window.onload=函数（）{
日志（“内部加载”）；
};

屏幕截图：

<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>

铬：

火狐：

为什么不将背景添加到特定的类中？这样，只有在将特定类添加到元素时，才会加载图像

$（函数（）{
$（“按钮”）。单击（函数（）{
$（'.remoteAudioSoundButton'）.toggleClass（'visible'）；
});
});
.remoteAudioSoundButton{
显示：无；
宽度：200px；
高度：200px；
边框：2件黑色；
}
.可见{
背景：url（“http://ourserverurl/images/image_lady.png");
显示：块；
}

切换类
浏览器可以加载与元素相关的图像，这些元素具有显示：无设置
我以前使用过类似于以下片段的技术来解决这个问题：

document.getElementById（'showKitty'）.addEventListener（'click'，function（）{
var kitty=document.getElementById（'kitty'）；
kitty.src=”https://placekitten.com/g/200/300"; 
kitty.classList.toggle（'hidden'）；
});
。隐藏{
显示：无；
}
JavaScript能做什么？
Show kitten
以下是不同浏览器行为的文档：

上面说：
Chrome和Safari（WebKit）
WebKit每次都会下载该文件，但后台文件不可用时除外
通过不匹配的媒体查询应用。火狐
如果
样式是隐藏的，但它们仍将从img标记下载资源。
歌剧院
像Firefox一样，Opera不会加载无用的背景图像。
Internet Explorer
IE，比如WebKit，即使有背景图片也会下载
显示：无
因此，要回答“为什么”的问题：
任何一方的快速论证：
Firefox-在内容可见之前不要加载：
没有理由加载未被查看的内容，提高页面加载时间
Webkit-在pageload上加载图像：因此，可能JavaScript决定稍后使元素可见，如果图像未预加载，则转换可能会不稳定，以及用于预加载图像的任何其他参数
以及对该主题的简要讨论：
Related：因此您必须在以后从JavaScript手动设置src。但是，如果src属性值仅为html/css设计器所知，该怎么办？在JavaScript中操纵页面的人只有显示或隐藏元素的任务。诚然，我俩都是人。所以在纯HTML/CSS中没有解决这个特殊问题的方法？没有。但这有什么关系呢？如果您已经在使用JS，则使用另一个类设置背景图像样式的方法。正如另一个答案所建议的，我同意，听起来是最好的选择。这是rarama建议的。下载的图像不是在IE8Nice中呈现的。我要这样做。下载的图像不会在IE8中呈现