Отказ от отображения страницы до загрузки изображений

Question

Возможно ли отложить рендеринг страниц до загрузки изображений, чтобы изображения не загружались, когда страница раскрашивается?

Приветствия!

Answer 1

Вы можете использовать onload на картинке для просмотра, если она была загружена.

var img = new Image(); 
 
img.src = "http://www.mind-coder.com/example.jpg"; 
 
img.onload = function() { alert("Height: " + this.height); }

Полный пример ниже, что он делает:

• div называется покрытие, покрывает вашу страницу, прежде чем все изображения будут загружены (возможно, показывая сообщение, как, пожалуйста, загрузка).

• Сценарий JS (ваниль no jQuery здесь нужен) выполняет поиск всех изображений на странице и загружает их с использованием пути src, сохраненного в data-src для каждого изображения.

• onload выполняется при загрузке изображения и loadCount переменная отслеживает, сколько изображений загружено, проверяет общее количество на странице.

• Когда количество загруженных изображений одинаково для изображений на странице, скрывает обложку, и она показывает вашу страницу.

(function() { 
 
    var loadCount = 0; 
 
    var imgs = document.querySelectorAll('img'); 
 
    imgs.forEach(function(img) { 
 
img.src = img.dataset.src; 
 
img.onload = function() { 
 
    loadCount++; 
 
    if (loadCount === imgs.length) { 
 
    document.getElementById('cover').style.display = 'none'; 
 
    } 
 
}; 
 
    }); 
 
})()

#cover { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div id="cover">cover - loading</div> 
 
<img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley,_California.jpg"> 
 
<img data-src="https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG">

Answer 2

Вы можете сделать что-то, как показано ниже. Во-первых не установлен дисплей: нет в вашем теле в HTML, так что ничего не отображается, а затем в поле ниже условия

$(window).on("load", function() { 
    //show the body like below 
    $("body").fadeIn(500); 
}); 

тело {дисплей: нет; }