預加載背景圖片

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

您可以按如下方式預加載圖像

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+")")

這通常會導致您的圖像已被加載並正確顯示。

Answer 2

您可以使用 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 3

一旦瀏覽器加載它，它就不會一直重新加載。 第二次渲染相同的圖像不會有這樣的問題，

使用i= i==3?0:++i制作圖像循環。 而不僅僅是 i++ Fiddle

Answer 4

第一次，瀏覽器需要下載所有的圖片，一旦下載，它就會從緩存中加載。

因此，每次瀏覽器下載文件時，都會出現無圖像的閃爍。 你有兩個選擇

1. 您正在遵循的方法（沒關系）

2. 通過使用以下代碼，使用 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; }