Question

我有一个预加载图像功能，我想在每次调用时预先加载2个图像，直到所有图像都被预加载。这是我的功能：

function preload() {
  for (i; i < images.length; i++) {
    images[i] = new Image()
    images[i].src = '/imagecache/cover/' + images[i]
  }
}

我不知道如何实现这一点，能够在每次调用时更改开始次数和迭代次数（2），直到整个图像数组被预加载？

已更新

这是我的完整脚本：

 $(document).ready(function () {
    var imagesIndex = 0;
    var loadedImages = new Array();
    var nextImage = 0;
    preload();

    function preload() {
        for (i = 0; i < 2; i++) {
            if (nextImage < images.length) {
                var img = new Image();
                img.src = '/imagecache/cover/' + images[nextImage];
                loadedImages[nextImage] = img;
                ++nextImage;
            }
        }
    }

    $('#forward').click(function() {
      imagesIndex++;
      preload();

      if (imagesIndex > (loadedImages.length - 1)) {
          imagesIndex = 0;
      }

      $('#image').attr({"src" : '/imagecache/cover/' + loadedImages[imagesIndex], "alt" : name});
    });

    $('#back').click(function() {
        imagesIndex--;

        if (imagesIndex < 0) {
            imagesIndex = (loadedImages.length - 1);
        }

        $('#image').attr({"src" : '/imagecache/cover/' + loadedImages[imagesIndex], "alt" : name});
    });
});

这里我有前进和后退函数，我想调用preload函数迭代2次。

Answer 1

跟踪函数外部数组的位置。但首先，您需要修复一个问题，即您在之前使用Image对象覆盖了我所假设的图像的URL。

例如：

var nextImage = 0;
function preload() {
    preload1();
    preload1();
}
function preload1() {
    if (nextImage < images.length) {
        var img = new Image();
        img.src = '/imagecache/cover/' + images[nextImage];
        images[nextImage] = img;
        ++nextImage;
    }
}

当然，您可以使用循环代替preload1。

Answer 2

您可以尝试这样的事情：

object

var imageList = ['1.png', '2.png', '3.png', '4.png', '5.png'];
var _images = imageList.slice(0);
var STATIC_PATH = '/imagecache/cover/';

function loadImage(image) {
  var img = new Image()
  img.src = STATIC_PATH + image;
  return img
}

function loadNImages(n) {
  var tmp = _images.splice(0, (n || 1));
  return tmp.map(function(img) {
    return loadImage(img);
  })
}

function initTimeout() {
  setTimeout(function() {
    var imgs = loadNImages(2);
    imgs.forEach(function(img){
      document.querySelector('.content').append(img)
    })
    if (_images.length > 0) {
      initTimeout();
    }
  }, 1000)
}
initTimeout()

每次调用迭代时迭代设置迭代次数直到数组结束

2 个答案: