Как предотвратить загрузку фоновых изображений на слайдере изображения

Question

Я использую unlider для отображения слайдера изображения на главной странице моего сайта. Я использовал фоновые изображения для слайдов в css, которые меняются в зависимости от медиа-запроса. Я хочу, чтобы браузер не загружал все слайдерные изображения, когда он впервые встречает файл css, чтобы он не замедлял загрузку остальной части страницы.

Слайдер имеет 4 слайдов, и я в настоящее время установлено:

.slide2, 
.slide3, 
.slide4 { 
    display: none; 
} 

Затем в скрипте в нижней части страницы, я включил:

$("document").ready(function() { 
    $(".slide2, .slide3, .slide4").css({"display" : "block"})  
}); 

Я прочитал однако Opera является единственным браузером, который загружает изображение, когда дисплей настроен на блокировку, другие браузеры по-прежнему загружают изображения сразу.

Задержка на 10 секунд до того, как она переместится на второй слайд, поэтому будет достаточно времени, чтобы загрузить оставшиеся слайдерные изображения после загрузки остальной страницы. Я не хочу менять атрибут background-image с помощью jQuery, потому что для ползунков в зависимости от ширины видового экрана есть разные изображения.

Есть ли другой способ решить эту проблему?

Answer 1

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

$(document).ready(function() { 
    $('.slide2').css({"background-image" : "url('path/to/your/image2')"}); 
    $('.slide3').css({"background-image" : "url('path/to/your/image3')"}); 
    $('.slide4').css({"background-image" : "url('path/to/your/image4')"}); 
});