css：显示无。这个很贵吗？

Question

我决定让 阅读更多... 功能，有两个div，并设置其中一个display: none 但在这种情况下，我将所有数据存储两次。 现在的问题 -

---

如果我有一个包含style="display:none"的div元素，其中包含许多大尺寸图像，是否会对页面打开时间产生影响？

Answer 1

display:none不会阻止隐藏内容加载到页面的其余部分。

如果您想在加载时使页面“更轻”，您可以通过Ajax按需加载“read more ..”内容。

Answer 2

即使父div设置为display: none，也会立即获取图像。

如果这不是您的意图，并且您不想使用AJAX路径，则可能只需在单击read more...按钮时将图像插入DOM，如下例所示：

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

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

hiddenDiv.appendChild(imageToLoad);