如何验证何时在JavaScript中加载了多个图像

本文概述

• 正确的方法如何起作用？
• 成功与错误的实现

一些与图像非常兼容的应用程序将为开发人员引入一个众所周知的问题, 即如何同时知道在浏览器中至少加载了2张图像。可以使用JavaScript处理DOM中的每个图像, 并且很容易知道何时成功加载了图像。但是, 没有这样一种默认方法可以知道何时加载了一组图像。由于加载图像的方式可能不是在后台而是直接在视图中, 或者你正在直接使用DOM对象, 因此没有通用功能可以自动为你完成操作, 但是你可以学到一个非常简单的技巧许多开发人员知道, 是否已经成功加载了2个图像。

正确的方法如何起作用？

从理论上讲, 要验证何时加载所有图像, 你将需要具有一个用作计数器的标志变量。每当成功加载或未成功加载img时, 此计数器都会增加, 并且每次发生此事件时都需要触发另一个函数, 因此在过程结束时将执行yes或yes回调。此函数验证计数器值是否等于要加载的图像数, 并且在发生这种情况时将执行回调。你的回调将收到未加载的图像作为第一个参数：

// Create the flag variables (counter and total of images)
var Counter = 0;
var TotalImages = 2;

// Create an instance of your images
var Image1 = new Image();
var Image2 = new Image();

// Store the images that were not correctly loaded inside an array to show later
var notLoadedImages = [];

// The onload callback is triggered everytime an image is loaded
var onloadCallback = function(){
    // Increment the counter
    Counter++;

    // Verify if the counter is less than the number of images
    if(Counter < TotalImages){
        return;
    }

    // Trigger the final callback if is the last img
    allLoadedCallback();
};

// The onerror callback is triggered everytime an image couldn't be loaded
var onerrorCallback = function(){
    // Increment the counter
    Counter++;
    
    // Add the current image to the list of not loaded images
    notLoadedImages.push(this);

    // Verify if the counter is less than the number of images
    if(Counter < TotalImages){
        return;
    }

    // Trigger the final callback if is the last img
    allLoadedCallback();
};

// The callback that is executed when all the images have been loaded or not
var allLoadedCallback = function(){
    console.log("Atention, the following images were not loaded ", notLoadedImages);
};

// Attach onload callbacks
Image1.onload = onloadCallback;
Image2.onload = onloadCallback;

// Attach onerror callbacks
Image1.onerror = onerrorCallback;
Image2.onerror = onerrorCallback;

// Load the images !
Image1.src = "queso.png";
Image2.src = "image.jpg";

请注意, allLoadedCallback仅执行一次。显然, 代码只是逻辑工作方式的一个示例, 因此你可以包装它并使它与2个以上的图像一起工作。下一步显示了一个简单的函数, 该函数允许你使用一个函数加载多个图像, 并执行一个回调来通知是否加载了哪些图像。

成功与错误的实现

以下ImageLoader方法以以下方式工作：你需要提供一个数组, 其中包含要加载的图像的URL作为第一个参数。在内部, 该函数将使用Image类加载它, 并循环访问图像的每个给定URL。当图像加载或不加载并存储在一个对象中时, 内部计数器将按照基本逻辑中的说明递增, 该对象将在稍后在onAllLoaded回调中返回：

注意

由于浏览器是加载图像的浏览器, 因此你不必担心下载的性能, 因为图像肯定会被缓存, 并且可以随后用于在<img>标签中呈现它们。

/**
 * Loader function that helps to trigger a callback when multiple images has been loaded. Besides
 * indicates which images were correctly/wrong loaded.
 * 
 * @param {Array} Images An array of strings with the paths to the images.
 * @param {Function} Callback Callback function executed when all images has been loaded or not.
 */
function ImageLoader(Images, Callback){
    // Keep the count of the verified images
    var allLoaded = 0;

    // The object that will be returned in the callback
    var _log = {
        success: [], error: []
    };

    // Executed everytime an img is successfully or wrong loaded
    var verifier = function(){
        allLoaded++;

        // triggers the end callback when all images has been tested
        if(allLoaded == Images.length){
            Callback.call(undefined, _log);
        }
    };

    // Loop through all the images URLs
    for (var index = 0; index < Images.length; index++) {
        // Prevent that index has the same value by wrapping it inside an anonymous fn
        (function(i){
            // Image path providen in the array e.g image.png
            var imgSource = Images[i];
            var img = new Image();
            
            img.addEventListener("load", function(){
                _log.success.push(imgSource);
                verifier();
            }, false); 
            
            img.addEventListener("error", function(){
                _log.error.push(imgSource);
                verifier();
            }, false); 
           
            img.src = imgSource;
        })(index);
    }
}

然后可以这样使用：

ImageLoader(["example.png", "example.jpg", "http://i.imgur.com/fHyEMsl.jpg"], function(result){
    if(result.error){
        // outputs: ["example.png", "example.jpg"]
        console.log("The following images couldn't be properly loaded: ", result.error);
    }

    // outputs: ["http://i.imgur.com/fHyEMsl.jpg"]
    console.log("The following images were succesfully loaded: ", result.success);
});

这种方法的优点是你将知道是否加载了哪些图像。请注意, 使用此功能, 你将能够验证到图像路径的字符串, 因为Image实例将不起作用(就像已经选择的img DOM元素一样, 因为不会触发onload回调)。

编码愉快！