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

其中，帧数是序列中的总图像数（此阶段为6或12），图像的命名约定如下：

Brand_Product_Category_ProductID_SequenceNo.jpg。

我正在尝试做的是没有加载持有起始图像的div，直到所有这些图像都已使用下面的文档准备好的预览片进行预加载，但这似乎没有正常工作，即，在所有必需的图像被预加载之前显示持有者，因此动画不能顺利运行。

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

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

Answer 1

问题在于：

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

您可以为图像的'load'事件定义处理程序...因此您将需要沿着这些行使用某些内容。

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

jQuery为动画预加载图像

1 个答案: