css：無顯示。這個很貴嗎？

Question

我決定做通過具有兩個div S，並將它們設置display: none 之一，但在這種情況下，我存儲所有數據兩次讀更多...功能。 現在的問題 -

---

如果我有一個div元素，具有style="display:none"，其中包含了很多的大尺寸圖像時，它會對網頁打開時間的影響？

Answer 1

display:none不會阻止隱藏的內容與頁面的其餘部分一起加載。

如果您希望在加載時使頁面變得更輕，則可以通過Ajax按需加載「read more ..」內容。

Answer 2

即使將父div設置爲display: none，圖像也會立即獲取。

如果這不是你的意圖，你不想去與AJAX路線，你可能要插入的圖片到DOM被點擊的read more...按鈕只有當，如下面的例子：

var hiddenDiv = document.getElementById("your-hidden-div-id"); 
var imageToLoad = document.createElement("img"); 

imageToLoad.setAttribute("src", "image1.png"); 

hiddenDiv.appendChild(imageToLoad);