javascript - Jquery：使用回调函数根据请求预加载图像？

Question

我正在帮助一位朋友开发他正在开发的网站，但我们在根据请求预加载图像时遇到了问题。基本上，当用户单击产品的缩略图时，会<div>向下滑动，其中包括大图像的滚动轮播。总共可以加载大约 20MB 的图像（如果你全部完成的话），因此在页面加载时预加载它们不是一个选项。

有没有一种方法可以调用一个开始预加载大约 4 个图像的 javascript 函数，然后当它完成时它有一个回调函数？

谢谢！PS我们在页面上使用jQuery ...

Answer 1

可以使用以下代码完成预加载图像：

$('<img/'>,{'src': image_source});

由于我们也可以load在图像上使用事件，所以我们可以在完成一张图像时进行回调；为了解决加载四张图片后触发回调的问题，我们需要某种计数器。

也许以下代码可能有效（未经测试）：

var preloadImages = function(image_links, callback) {
  var self = this;
  // assume image_links is an array here
  var count = image_links.length;
  $.each( image_links, function(){
    $('<img/>', {
      'src': this, // url
      'load': function(){
        if( --count == 0 ) {
          callback.apply(self);
        }
      }
    });
  });      
}