Страница слишком медленная из-за фоновых изображений

Question

Я использую полноэкранную галерею CSS3 (без JavaScript) на одном веб-сайте. Галерея в основном представляет собой неупорядоченный список, в котором каждый элемент списка является одним полноэкранным фоном.

Он работает, установив фоновое изображение в файле CSS для каждого элемента списка. В настоящее время галерея содержит 48 изображений, и страница занимает слишком много места для загрузки.

Первый вид - где-то около 35 секунд. Кажется, браузер сначала загружает каждый элемент DOM, и это занимает слишком много времени.

Есть ли способ не загружать элементы элемента списка при загрузке страницы, но сделать их видимыми только после загрузки страницы?

Сайт можно увидеть на http://www.steveezell.com

Answer 1

Если вы объявляете изображение в источнике HTML, это будет нагрузка всегда во время загрузки страницы. Я думаю, что лучший вариант - изменить исходный код изображения на JavaScript.

пс: хорошая страница

Answer 2

Вы можете просто использовать AJAX вызовы после полной загрузки страницы:

// Load the script when the page has fully loaded: 

$(window).load(function() { 
$.getScript(‘your_3rd_party-script.js’); 
}); 

RetrieveImages.js:

// Load here all the images (You might consider showing the first image 
// or images with the regular page loading to show a first indication to the user 
// and avoid waiting for the page to finish load before showing something). 

document.getElementById("myImg").src = "http://www.example.com/image?id=1"; 

Вы, вероятно, следует использовать JQuery группирования для загрузить все изображения по классу $(".className").

Что такое код сервера, который вы используете? Я бы рекомендовал включить сжатие gzip, что должно резко уменьшить размер изображений.