0

处理一个 HTML5/CSS3 项目，该项目需要加载一些稍大（约 100k）的精灵贴图并将其放置到<canvas>. 放置没有问题，但我遇到了在加载图像之前意外放置图像的问题，因为无法检测通过 javascript 请求的图像的加载完成。

预加载图像并处理 oncomplete 事件的最佳方法是什么？现在我正在使用标准检测页面加载$(document).ready()，但我可以使代码适应任何所需的事件处理程序。如果有一个插件可以处理这一切，那就太棒了。

不过，我对预加载有点特别——如果可能的话，我希望一切都留在 javascript 中。寻找比将图像放置在隐藏的 div 或虚拟 css 中更优雅的东西。

有任何想法吗？

4

3 回答 3

1 
var img = new Image();
img.onload = callbackFunction;
img.src = 'http://source.of/image.png';

如果您经常使用它，只需为其创建一个函数：

function preloadImage (src, callback) {
    var img = new Image();
    img.onload = callback;
    img.src = src;
    return img;
}

如果要在所有图像加载完毕后触发回调，请使用延迟对象：

function preloadImages (paths, callback) {

    var deferreds = [];

    $.each(paths, function (i, src) {
        var deferred = $.Deferred(),
            img = new Image();

        deferreds.push(deferred);
        img.onload = deferred.resolve;
        img.src = src;
    });

    $.when.apply($, deferreds).then(callback);
}
于 2013-01-15T23:18:25.350 回答
0

你可以使用负载处理程序吗？ http://api.jquery.com/load-event/

于 2013-01-15T23:18:36.760 回答
0

您可以预加载多个图像并为每个图像分配相同或不同的回调，如下所示：

preloadImages([
    {src:"image1.jpg", callback:someFunction1},
    {src:"image2.jpg", callback:someFunction2},
    {src:"image3.jpg", callback:someFunction3}
]);

function preloadImages(arr)
{   
    function _preload(imgObj)
    {
        var img = new Image();
        img.src = imgObj.src;
        img.onload = imgObj.callback;
    }

    for (var i = 0; i < arr.length; i++)
    {
        _preload(arr[i]);
    }
}
于 2013-01-15T23:32:52.733 回答