jQuery 预加载动画图像

Question

我知道有大量的 jQuery 预加载线程，我已经阅读了其中的大部分，但似乎仍然找不到解决我的问题的方法。

我有一个“定格动画”动画，它是通过 jQuery 使用队列并基于图像的顺序命名构建的。在加载所需的所有图像之前，我不想运行此动画。目前不支持 Spriting，因为不同的产品类型有不同的动画，并且所有图像都已由客户端生成。

我目前的预加载代码如下:

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

其中，frames 是序列中图像的总数(此阶段为 6 或 12)，图像的命名约定如下:

Brand_Product_Category_ProductID_SequenceNo.jpg。

我想做的是不加载保存起始图像的div，直到使用文档准备中的下面的代码片段预加载所有这些图像，但这似乎无法正常工作，即在预加载所有必需的图像之前就显示了holder，因此动画运行不流畅。

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

我想我需要某种回调，尽管我不确定如何实现它。

Answer 1

问题是这样的:

当您为 Image 对象的 src 字段赋值时，它会执行以下操作:更改 src 属性。浏览器仍然需要从 src 属性指向的任何位置加载图像。

您可以为图像的“加载”事件定义一个处理程序...因此您将需要使用类似的东西。

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