Question

我正在使用unslider在我网站的主页上显示图片滑块。我已经在css中使用了背景图像，这些图像根据媒体查询而变化。我想阻止浏览器在第一次遇到css文件时加载所有滑块图像，这样它就不会减慢加载页面其余部分的速度。

滑块有4张幻灯片，我目前已设置：

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

然后在页面底部的脚本中我已经包含了：

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

但我已经阅读过Opera是唯一一个在显示设置为阻止时下载图像的浏览器，其他浏览器仍会立即加载图像。

在移动到第二张幻灯片之前有10秒的延迟，因此在页面的其余部分加载后，将有足够的时间加载剩余的滑块图像。我不想用jQuery更改background-image属性，因为根据视口宽度，滑块有不同的图像。

还有另一种解决方法吗？

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')"});
});

如何防止在图像滑块上加载背景图像

1 个答案: