Question

我知道这是一个很多次问的问题，但我的情况有点不同。我想要加载图像，即使它们没有显示或在代码中。我有这样的事情：

HTML

<div id="gallery">
    <div class="photo></div>    
</div>

<div id="thumbnails>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

的jQuery

$('.thumb:nth-of-type(1)').click(function(){
    $('.photo').css('background','url(css/img/1.jpg)');
});

$('.thumb:nth-of-type(2)').click(function(){
    $('.photo').css('background','url(css/img/2.jpg)');
});

$('.thumb:nth-of-type(3)').click(function(){
    $('.photo').css('background','url(css/img/3.jpg)');
});

$('.thumb:nth-of-type(4)').click(function(){
    $('.photo').css('background','url(css/img/4.jpg)');
});

我知道这不是最好的，但对我来说这是最简单的。问题是，当我点击照片时，它会发生变化，但需要一些时间来加载它看起来很糟糕。有没有办法加载图像，即使它们没有出现在页面/代码上呢？

Answer 1

放多个

<div class="photo"></div>

使用活动后台的“活动”类并在加载页面时加载bckgnd。

然后只需将“活动”类从一张照片更改为另一张照片。

在显示网站之前为所有图像充电

1 个答案: