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

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

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

#1楼 票数:3 已采纳

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

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

  ask by tarnfeld translate from so

未解决问题?本站智能推荐:

3回复

jQuery图像预加载顺序

我在一个方面就很难适应jQuery图像预加载脚本:我不知道如何确保以图像阵列的顺序加载/显示图像。 目前,每次我重新加载页面时,图像以不同的顺序显示。 (除图像顺序外,所有其他东西都可以正常工作。) 谁能帮我解决这个问题? 相关代码: 更新: 最后,我用一个完全
1回复

如何使用jQuery预加载图像

嗨,我有一个项目,其中一个页面有一个图库。 像这样: 我想预加载这些图像,以便在您访问图库页面时它们已经被加载。 我知道您可以使用javascript做到这一点。 类似于以下内容: 我不确定的是下一步。 我是否要从html中删除src并添加一个ID,如下所示: 然
1回复

这是在Javascript / Jquery(带有动画)中预加载图像的正确方法吗?

我正在尝试在HTML图片加载时显示基本动画。 这是正确的方法吗? 我不确定这是否正确:尽管小动画可以在我的浏览器中使用,但始终会加载小动画,即使大图像已经加载并且位于缓存中也是如此。 有没有一种方法可以停用此功能,或者可以考虑使用另一种方法来处理带有小动画的图像预加载? 谢
1回复

幻灯片播放,一次可预加载一幅图像

我要在正在开发的页面中进行幻灯片显示,但其中包含很多图像,总大小超过15 MB。 因此,在幻灯片开始之前预加载所有图像是不可行的。 我希望幻灯片淡入并停留5秒钟。 我希望在显示上一个图像时预加载下一个图像。 图片的尺寸不同,因此加载后下一张图片不能隐藏在上一张图片的后面。 有什么帮助吗
1回复

Skrollr 图像闪烁。 Firefox 预加载问题

我正在使用 Skrollr 通过在用户滚动到页面上指示的位置时触发背景图像更改来开发“翻书式”动画。 我遇到的问题是在浏览器中图像更改被延迟,创建只能定义为帧之间的白色“闪烁”。 HTML 很简单; 它基本上指出,在距 div 顶部 560 像素处(相对于浏览器窗口),背景应位于第 1 帧,然
1回复

JavaScript图像预加载无法正常工作

我有一个JS / jQuery脚本,可以在页面上动态添加图像。 我正在使用节点作为服务器。 我已经在服务器端添加了日志,并且我注意到每次完成一个“附加”操作后,页面都会向服务器询问该图像,即使它始终是相同的两个图像。 现在,这会在Chrome上发生,但不会在Mozilla上发生,因为Moz
3回复

仅在加载整个页面后预加载图像

我想预加载5-6张图像,以便在用户向下滚动时可以显示它们(facebook-like-auto-load-on-scroll)。 因此,当用户向下滚动时,无需进一步加载即可显示图像。 我之前使用了以下CSS代码: 因此,当使用jQuery时,我使它们可见,它们没有加载就出现了。 但
4回复

预先加载较大图像的有效方法

我正在建立一个以许多大图像为中心的幻灯片中心。 我想预加载这些图像,以使用户在浏览该网站时不会受到任何加载或过多的延迟。 我碰到了这一页,并决定使用JavaScript方法#1。 因此,我基本上遵循给出的代码并将其放在页脚中,当然还要添加自己的图像。 但是,考虑到每个图像的大小,这