动画与图像预加载

Question

我有一个对象MyObject列表，看起来像这样：

var Obj1 = {'ImgTop':'500px','ImgLeft':'200px','ImgSrc':'/image1.jpg'}
var Obj2 = {'ImgTop':'300px','ImgLeft':'100px','ImgSrc':'/image2.jpg'}

我将这些对象加载到这样的数组中：

var AnimCycle = new Array(2);

AnimCycle[0] = Obj1;
AnimCycle[1] = Obj2;

在我的代码中，实际上有15个对象加载到数组中。我有一个递归调用的函数，在函数内部，我有这一行：

$('#HomeImg').attr('src', AnimCycle[PanelID].ImgSrc); 

问题是当触发线时会发生图像加载。如何使图像预加载？

感谢您的建议。

Answer 1

将所有图片放入html中的隐藏div：

<div style="display:none">
    <img src="/image1.jpg" />
    <img src="/image2.jpg" />
</div>

页面加载时会下载它们，但不会显示它们。您的JavaScript可以保持原样。

如果您想使用脚本执行此操作，请将其放在准备好的处理程序中：

var imgPreloader = $("<div>").hide().appendTo("body");
$.each(AnimCycle, function() {
    $("<img>").src(this.ImgSrc).appendTo(imgPreloader);
});

Answer 2

这是一个简单的脚本，有助于使用javascript预先加载图像。

    $.each(data, function(index, item) {
        var tempImage = new Image();
        tempImage.src = item.url;
        preloadedImages.push(tempImage);
    }


where data as an array of image data 
data=
{
   name:'NameofImage',
   url:'http://www.website.com/image1.jpg',
}

要显示图像，只需将图像添加到DOM

即可

 $("img").attr({
                src: item.src
            }).appendTo("#target");

我有一个简单的jsfiddle来演示脚本。它从ajax请求中获取数据并预加载图像。当用户将鼠标悬停在目标上时，它会将图像附加到DOM。

下面是屏幕截图，显示在页面加载时正在加载图像：

这个reference link认为隐藏在div中的图像可能不会像Opera那样在某些浏览器中预先加载。我以为还没有验证过它。

如果您不想使用javascript，可能还有其他方法可以使用css加载图片

希望这有帮助