Question

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

等待第一张图像完全加载后阻止整个循环
每次完全预加载新图像时，它都会开始预加载以下图像
当数组结束时，预加载必须停止并使用缓存的图像，因此在浏览器上很容易，并且不会一直在图像上一遍又一遍地加载相同的数组。

任何帮助？

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

});

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

用于缓存的AS，一旦它们被浏览器自动缓存后加载，那么应该没有问题。

如何在环形阵列中为背景图像预加载图像

1 个答案: