如何在背景图像的循环数组中预加载图像

How to preload images during a looped array for background images

本文关键字：图像 数组 加载 循环 背景      更新时间：2023-09-26

我编写了一个简单的循环，它循环遍历数组中的一系列图像，并将其转换为元素的背景图像属性。问题是，由于图像正在加载，所以在最初加载所有内容时，动画会失控。我正在尝试建立一个预加载工作流，其中：

  1. 通过等待直到第一个图像被完全加载来阻止整个循环
  2. 每当一个新映像被完全预加载时，它就会开始预加载以下映像
  3. 当数组结束时，必须停止预加载，并使用缓存的图像，这样在浏览器上就很容易了，而不是永远在图像上加载相同的数组

有什么帮助吗？

http://codepen.io/jeremypbeasley/pen/JoZzyo?editors=001

var photoSet = [
"https://farm6.staticflickr.com/5475/9790841974_182a06590a_o.jpg",
"https://farm3.staticflickr.com/2840/9042399407_bf04388aca_o.jpg",
"https://farm6.staticflickr.com/5504/14634417581_626ea1a835_o.jpg"
];
var p = photoSet.length;
console.log(p);
var i = 1;
function loopPhotos() {
setTimeout(function() {
    $('div').css({'background-image': 'url(' + photoSet[i] + ')',});
    i++;
    console.log(i);
// call the next indexed image and begin to preload it
var img = new Image();
img.src = photoSet[i];
if (i >= p) {
        i = 0;      
  // stop preloading images, somehow used images that are cached so the browser isn't working eternally reloading the same X number of photos.
    }
loopPhotos();
}, 2000)
}
$(document).ready(function() {
  // load first image
  var firstImg = new Image();
  firstImg.src = photoSet[0];
  // when first image is loaded, apply it to background and begin looping
  if (firstImg.complete) {
$('div').css({'background-image': 'url(' + firstImg.src + ')',});
loopPhotos();
console.log('first image loaded!');
  }
});

这将完成

var photoSet = [
  "https://farm6.staticflickr.com/5475/9790841974_182a06590a_o.jpg",
  "https://farm3.staticflickr.com/2840/9042399407_bf04388aca_o.jpg",
  "https://farm6.staticflickr.com/5504/14634417581_626ea1a835_o.jpg"
];
function preloadImageAndAct(src, action){
  var img = new Image();
  img.onload = action;
  img.src = src;
}
function showImage( src ){
  $('div').css({
    'background-image': 'url(' + src + ')',
    opacity: 1
  });
}
var nextImage = 0;
function loopPhotos() {
  console.log('Preload and show image #', nextImage);
  var nextSrc = photoSet[nextImage];
  preloadImageAndAct( nextSrc, function(){
    showImage( nextSrc );
    setTimeout( function() {
      nextImage++;
      nextImage %= photoSet.length;
      loopPhotos();
    }, 2000);
  });
}
$(document).ready(function() {
  loopPhotos();
});

演示位置http://codepen.io/gpetrioli/pen/rarPay

请记住，不能转换background-image。如果你想转换图像的变化，你需要使用两个元素或淡出元素/改变src/淡入元素。

至于缓存，一旦它们被加载，就会被浏览器自动缓存，所以这应该没有问题。

相关文章：