jQuery为动画预加载图像

我知道有一堆jQuery预加载线程，并且我已经阅读了大部分代码，但仍然无法找到解决我的问题的方法。jQuery为动画预加载图像

我有一个“停止运动”动画，它是通过使用队列和基于图像的顺序命名的jQuery构建的。我不想运行这个动画，直到它所需的所有图像都被加载完毕。由于不同的产品类型有不同的动画，并且所有的图像都已经由客户端生成，因此目前并不是一种选择。

在力矩My预加载代码是如下：

function preloadImages($img, $frames){ 
    var $imgsrc = $img.attr("src"); 
    var $getext = $imgsrc.split('.'); 
    var $ext = $getext[1]; 
    var $exploded = $getext[0].split('_'); 
    var $newsrc = ""; 
    for (var i=1; i <= $frames; i++){ 
     for (var j=0; j < $exploded.length-1; j++){ 
      $newsrc = $newsrc + $exploded[j] + "_"; 
     } 
     $newsrc = $newsrc + i + "." + $ext; 
     var image_preload = new Image(); 
     image_preload.src = $newsrc; 
    } 
}

如肋骨是总的图像的数量的序列（6或12在该阶段）中，以及用于图像的命名约定是如下：

Brand_Product_Category_ProductID_SequenceNo.jpg。

我想要做的不是加载保存起始图像的div，直到所有这些图像已经使用下面的文档准备好的片段被预加载，但是这似乎不能正常工作，即，在预先载入所有需要的图像之前显示持有人，因此动画不能流畅运行。

$(".holder").hide(); 
preloadImages($(".holder img"), 6); 
$(".holder").fadeIn("slow");

我想我需要某种回调，但我不知道如何实现它。

来源

2010-12-15 pingu

你现在的代码有什么问题？ – 2010-12-15 01:09:37

图像预加载之前显示持有人 - 编辑我的问题以包含此内容。 – pingu 2010-12-15 01:29:18

你的命名约定是什么？为什么你用$符号加前缀所有变量名？（这有点令人困惑） – 2010-12-15 01:31:05

问题是这样的：

当值赋给一个Image对象的src领域，它不只是：改变src属性。浏览器仍然需要从src属性指向的任何地方加载图像。

您可以为Image的'load'事件定义一个处理程序...因此您需要沿着这些行使用某些东西。

一种方法是定义需要加载的图像列表。每次加载图像时，都要在数组中设置一个标志。定期检查数组，并且一旦设置了所有标志，指示所有图像都已加载，您可以淡入div。

来源

2010-12-15 01:41:46 Dancrumb

jQuery为动画预加载图像

回答

相关问题