在不同瀏覽器中隱藏html元素的不同行爲

我有div，display:none爲style屬性值。在CSS中，爲此div設置了背景圖片網址。我只是不想讓圖像的請求被觸發，直到div稍後通過一些JS代碼可見。在Firefox中，網絡選項卡顯示請求沒有按預期發佈。但在Chrome開發人員工具我發現圖像的請求實際上是在DOMContentLoaded事件後觸發的。在這兩種不同的瀏覽器中，隱藏元素的不同行爲可能是什麼原因？在不同瀏覽器中隱藏html元素的不同行爲

標記：

<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

來源

2015-02-24 Md. Arafat Al Mahmud

相關：http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading – jdphenix 2015-02-24 07:16:31

爲什麼不將背景添加到特定的類？這樣，只有當特定的類被添加到元素時纔會加載圖像。

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

來源

2015-02-24 07:15:33 jrarama

尼斯。我會這樣做。 – 2015-02-24 07:38:56

下載的圖像不在IE8中呈現 – 2015-02-24 09:27:45

瀏覽器可能加載涉及具有display:none;組元素的圖像。

我以前使用的技術，這樣的片段圍繞這工作：

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

.hidden { 
 
    display:none; 
 
}

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

來源

2015-02-24 07:17:34 jdphenix

因此，您必須稍後手動設置JavaScript中的src。但是如果只有html/css設計人員知道src屬性值呢？而使用JavaScript操縱頁面的人只有顯示或隱藏元素的任務。 – 2015-02-24 07:28:11

無可否認，我都是傢伙。 – jdphenix 2015-02-24 07:28:50

可悲的是，我不是。 – 2015-02-24 07:30:44

下面是不同瀏覽器的行爲的文檔：

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

它說：

Chrome和Safari（WebKit的）

的WebKit除了當背景是通過非匹配媒體查詢應用於每次下載該文件。 Firefox

如果隱藏樣式，Firefox將不會下載使用背景圖片調用的圖片，但它們仍會從img標籤下載資源。 Opera

像Firefox一樣，Opera不會加載無用的背景圖像。 Internet Explorer

IE就像WebKit一樣會下載背景圖片即使他們有 display：none;

所以回答的爲什麼問題：

任何一方快速論點：

火狐 - 不要加載，直到內容可見： 沒有理由加載未被查看的內容，提高頁面加載時間。

的Webkit - 負載上頁面加載圖像：所以，也許JavaScript的決定使人們看到的元素後，如果圖像沒有預裝的過渡可能是波濤洶涌，並預載圖像的任何其他數量的參數。

而話題的簡短討論：

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

來源

2015-02-24 07:19:48 chiliNUT

因此，在純HTML/CSS中沒有解決這個問題的解決方法？ – 2015-02-24 07:29:02

沒有。但爲什麼這很重要？如果您已經使用JS，則使用不同的類設置背景圖像樣式。如另一個答案建議，聽起來像最好的選擇 – chiliNUT 2015-02-24 07:36:59

是的，我同意。這就是拉拉瑪所建議的。 – 2015-02-24 07:38:20

在不同瀏覽器中隱藏html元素的不同行爲

回答

相關問題