如何在背景图像的循环数组期间预加载图像答案

【问题标题】：How to preload images during a looped array for background images如何在背景图像的循环数组期间预加载图像
【发布时间】：2015-03-05 17:54:10
【问题描述】：

我编写了一个简单的循环，将数组中的一系列图像循环到元素的背景图像属性中。问题在于，由于图像正在加载，所以在最初加载所有内容时，动画会变得混乱。我正在尝试设置预加载工作流程，其中：

整个循环被阻塞，直到第一个图像完全加载
每次完全预加载新图片时，都会开始预加载以下图片
当数组结束并使用缓存的图像时，预加载必须停止，这样在浏览器上就很容易，并且不会永远在图像上一遍又一遍地加载相同的数组。

有什么帮助吗？

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!');
  }

});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这样就可以了

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/淡入元素。

作为缓存，一旦它们被浏览器自动缓存，它们就被加载了，所以应该没有问题。

【讨论】：