当前位置：文江博客话题详情

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

发布于 2024-09-03 14:56:15 字数 270 浏览 2 评论 0原文

我正在帮助一位朋友开发一个网站，但我们在根据请求预加载图像时遇到了问题。基本上，当用户单击产品的缩略图时，

会向下滑动，其中包含大图像的滚动轮播。总共大约有 20MB 的图像可以加载（如果您加载了全部），因此在页面加载时预加载它们不是一个选择。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天涯沦落人 2024-09-10 14:56:15

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

$('<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);
        }
      }
    });
  });      
}

Preloading images can be done using following code:

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

As we can also use the load event on images, we can have an callback when one image is done; To solve the issue to fire a callback after four images is loaded, we would need some kind of counter.

Perhaps following code might work (untested):

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

回复收藏 0 原文

~没有更多了~