Question

我创建了一个幻灯片，使用图像作为div背景，然后随着幻灯片的增加，背景图像值更新：

<div id="imageBoxContainer" style="background-image: url('<?php echo $image_url[0]; ?>');">


function incrementSlide(){
    $('#imageBoxContainer').css("background-image", "url(" + theNextSlide + ")");
}

问题是，当背景图像发生变化时，在图像完全加载之前，它会在几秒钟内变白。

是否可以使用上述架构预加载背景图像？

Answer 1

是的，您可以通过类似于您的方法来实现它。只需使用图像添加背景或src的div或图像元素（与背景图像一样多）。但是要使这些元素不可见，这样它们就不会显示出来。然后所有的图像都将被缓存，你的js将毫不拖延地工作。

<?php foreach($image_url as $image) {?>
<div class="imageBoxContainerCache" style="visibility: hidden; background-image: url('<?php echo $image_url[0]; ?>');">
<?php } ?>


function incrementSlide(){
    $('#imageBoxContainer').css("background-image", "url(" + theNextSlide + ")");
}

Answer 2

我最终使用jQuery的预加载函数：

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

似乎像魅力一样工作！

在div上预加载背景图像？

2 个答案: