Question

我正在像这样在javascript / jQuery中浏览背景图片...

var duration = 2500;
var delay = 500;
var i = 0;

setInterval(function() {

  if (i == 0) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");
  }

  if (i == 1) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");
  }

  if (i == 2) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");
  }

  if (i == 3) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");
  }

  i++;

}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

问题是，我偶尔会出现没有图像的闪烁，我认为这是由于未及时加载图像。有没有办法预加载它们？

Answer 1

您可以使用CSS预加载它们，例如：

body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

注意：：您可以在JS代码中使用图像数组，并根据索引i对其进行更改。

var duration = 2500;
var delay = 500;
var i = 0;
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];

setInterval(function() {
  $(".myimage").css("background-image", "url(" + images[i] + ")");
  i++;
}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

Answer 2

浏览器一旦加载它，就不会一直重新加载它。第二次渲染相同的图像时，不会出现此类问题，

使用i= i==3?0:++i使图像循环。不仅仅是我++ Fiddle

Answer 3

浏览器第一次需要下载所有图像，一旦下载，它将从缓存加载。

因此，每次浏览器下载文件时，都不会闪烁任何图像。您有两个选择

您遵循的方法（没关系）
使用CSS技巧通过以下代码一次性加载所有内容

.myimage { height: 500px; width: 500px; transition: background-image 1s linear; background-image: url('https://placeimg.com/1648/1480/any'); background-image: url('https://placeimg.com/1648/1481/any'); background-image: url('https://placeimg.com/1648/1482/any'); background-image: url('https://placeimg.com/1648/1483/any'); background-size: cover; }

Answer 4

您可以按照以下步骤预加载图像

function preloadImages(){

var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
var prelaodedImages = [];

for(i=0;i<images.length;i++){

  prelaodedImages[i] = new Image();
  prelaodedImages[i].src = images[i];
  console.log(prelaodedImages[i].src)
}

}

preloadImages();

在预加载图像之后，您可以使用代码，而不是

"url('https://placeimg.com/1640/1480/any')")

您使用

"url("+prelaodedImages1.src+")")

通常，这应该会导致您的图像已被加载并正确显示。

预加载背景图片

4 个答案: