I decide to make read more... function by having two divs, and setting one of them display: none but in this case i store all the data twice. now the question -
我决定让阅读更多……函数的作用是有两个div，并设置其中一个显示:none但在本例中，我将所有数据存储了两次。现在的问题,
If I have one div element, with style="display:none", which contains many big size images in it, is it have an influence on page opening time?
如果我有一个div元素，它的style="display:none"中包含很多大尺寸的图片，那么它对页面打开时间有影响吗?
2 个解决方案
#1
12
display:none does not prevent the hidden content from being loaded with the rest of the page.
显示:none不阻止隐藏的内容被加载到页面的其余部分。
If you want to make the page "lighter" at load time you can load the "read more.." content via Ajax on-demand.
如果您希望在加载时使页面“更轻”，您可以通过Ajax按需加载“read more..”内容。
#2
4
The images would get fetched immediately even when the parent div is set to display: none.
即使将父div设置为display，图像也会立即被获取:none。
If this is not your intention, and you do not want to go with the AJAX route, you may want to insert the images into the DOM only when the read more... button is clicked, as in the following example:
如果这不是您的意图，并且您不希望使用AJAX路径，那么您可能只希望在读取更多…点击按钮，如下例所示:
var hiddenDiv = document.getElementById("your-hidden-div-id");
var imageToLoad = document.createElement("img");
imageToLoad.setAttribute("src", "image1.png");
hiddenDiv.appendChild(imageToLoad);
#1
12
display:none does not prevent the hidden content from being loaded with the rest of the page.
显示:none不阻止隐藏的内容被加载到页面的其余部分。
If you want to make the page "lighter" at load time you can load the "read more.." content via Ajax on-demand.
如果您希望在加载时使页面“更轻”，您可以通过Ajax按需加载“read more..”内容。
#2
4
The images would get fetched immediately even when the parent div is set to display: none.
即使将父div设置为display，图像也会立即被获取:none。
If this is not your intention, and you do not want to go with the AJAX route, you may want to insert the images into the DOM only when the read more... button is clicked, as in the following example:
如果这不是您的意图，并且您不希望使用AJAX路径，那么您可能只希望在读取更多…点击按钮，如下例所示:
var hiddenDiv = document.getElementById("your-hidden-div-id");
var imageToLoad = document.createElement("img");
imageToLoad.setAttribute("src", "image1.png");
hiddenDiv.appendChild(imageToLoad);