Question

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

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

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

有什么想法吗？

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

如果要在 all 加载图像时触发回调，请使用a deferred对象：

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

Answer 2

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

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

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

3 个答案: