Question

我正在帮助他正在开发一个网站的朋友，我们在按要求预加载图片时遇到问题。基本上，当用户点击产品的缩略图时，<div>向下滑动，其中包括滚动的大图像转盘。总共有大约20MB的图像可以加载（如果你全部都是这样的），所以在页面加载上预加载它们不是一种选择。

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

谢谢！附：我们在页面上使用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);
        }
      }
    });
  });      
}

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

1 个答案: