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

【问题标题】：Jquery: Preload an image on request with a callback function?Jquery：使用回调函数根据请求预加载图像？
【发布时间】：2010-05-30 06:45:00
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery image preload

【解决方案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);
        }
      }
    });
  });      
}

【讨论】：