jQuery - 图像预加载的事件处理答案

【问题标题】：jQuery - event handling for image preloadingjQuery - 图像预加载的事件处理
【发布时间】：2013-01-15 23:16:20
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

你可以查看这个链接：[stackoverflow.com/questions/476679/…[1]:stackoverflow.com/questions/476679/…
Fire an event after preloading images 的可能副本

标签： jquery image canvas preloading

【解决方案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;
}

如果您想在所有图像加载完毕后触发回调，请使用a deferred object：

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

【讨论】：

太棒了 - 我有点尴尬，我忽略了这么简单的事情。一旦我有机会在我的代码中尝试它，我将奖励答案。
工作就像一个魅力 - 非常详细的答案。干杯伙伴。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以像这样预加载多个图像并为每个图像分配相同或不同的回调：

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

【讨论】：