Question

我有div display:none作为style属性值。在css中，为此div设置了背景图片网址。我只是不希望在稍后通过某些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>

截图：

铬：

enter image description here

火狐：

enter image description here

Answer 1

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

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

Answer 2

以下是不同浏览器行为的文档：

http://justinmarsan.com/hidden-elements-and-http-requests/

其中说：

Chrome和Safari（WebKit）

WebKit每次都会下载文件，除非背景是   通过不匹配的媒体查询应用。火狐

Firefox不会下载使用背景图片调用的图像   样式是隐藏的，但它们仍将从img标签下载资源。   戏

与Firefox一样，Opera不会加载无用的背景图像。   Internet Explorer

IE，就像WebKit一样，即使有了背景图像也会下载   display：none;

所以回答为什么：

的问题

任何一方的快速论据：

Firefox - 在内容可见之前不要加载： 没有理由加载未被查看的内容，从而缩短了页面加载时间。

Webkit - 在pageload上加载图片：因此，也许JavaScript决定让元素稍后可见，如果图像没有预加载，过渡可能会不稳定，并且用于预加载图像的任何其他数量的参数。

对该主题的简短讨论：

http://robertnyman.com/2010/03/11/do-hidden-elements-load-background-images/

Answer 3

浏览器可能会加载与display:none;设置的元素相关的图像。

我之前使用过这样一种技术来解决这个问题：

＆＃13;

document.getElementById('showKitty').addEventListener('click', function() {
    var kitty = document.getElementById('kitty'); 
    kitty.src = "https://placekitten.com/g/200/300"; 
    kitty.classList.toggle('hidden');
});

＆＃13;

.hidden {
  display:none;
}

＆＃13;

<h1>What Can JavaScript Do?</h1>
<img id="kitty" class="hidden">
<button id="showKitty">Show kitten</button>

＆＃13;

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

3 个答案: