Question

我有一个使用CSS在php中开发的标准网页，目前有一些javascript可以循环显示某些图片的商品div。你可以看到网站here，这不是它的最后安息之地，这是一个临时网站。如果你看看优惠横幅。当它切换到下一个图像时，它会变为白色，同时加载下一个图像。无论如何在将下一个图像应用到div背景属性之前加载它？这是我的javascript atm。

var c=0
var s
function offersCycle()
{
  if (c%3==0){
  document.getElementById('offers').style.background = "url(/images/1.jpg)";
}
if (c%3==1){
  document.getElementById('offers').style.background = "url(/images/2.jpg)";
}
if (c%3==2){
  document.getElementById('offers').style.background = "url(/images/3.jpg)";
}
c=c+1
s=setTimeout("offersCycle()",8000)

我尝试在javascript中使用一组新图像并在循环之前定义它们但是它们不适用于CSS，因为它依赖于url而不是图像本身？任何想法都赞赏。干杯，约旦

Answer 1

我会做这样的事情：

var c = 0, images = ["/images/1.jpg", "/images/2.jpg", "/images/3.jpg"];
for(var i=0; i<images.length; i++) {
  var img = new Image();
  img.src = images[i];
}
function offersCycle() {
  document.getElementById('offers').style.background = "url("+images[c%images.length]+")";
  c++;
}
var s = setTimeout(offersCycle, 8000);

通过使用数组，我们简化了逻辑，并且可以使用相同的数组来预加载图像，以便在页面首次加载时对其进行缓存。这也允许您在不更改任何内容的情况下向阵列添加任意数量的图像。

Answer 2

您可以使用Javascript预加载图片。

详细信息：https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

在将它们作为div背景循环之前加载图像？

2 个答案: