jQuery：根据要求使用回调函数预加载图像？

Question

我正在通过他正在开发的网站来帮助一位朋友，但是我们无法按要求预加载图像。 基本上，当用户单击产品的缩略图时， <div>向下滑动，其中包括大图像的滚动轮播。 总共可以加载约20MB的图像（如果全部完成），因此无法将其预加载到页面加载中。

有没有一种方法可以调用一个javascript函数，该函数开始预加载约4张图像，然后在完成后就具有回调函数？

谢谢！ 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);
        }
      }
    });
  });      
}