css: не отображатьЭто дорого?

Question

Я решил сделать читать дальше ... , имея две div с и установив одну из них display: none но в этом случае я храню все данные дважды. теперь вопрос -

---

Если у меня есть один элемент div с style="display:none", который содержит много изображений большого размера, влияет ли это на время открытия страницы?

Answer 1

display:none не препятствует загрузке скрытого контента с остальной частью страницы.

Если вы хотите сделать страницу «светлее» во время загрузки, вы можете загрузить контент «read more ..» через Ajax по требованию.

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);