Question

我在一个循环中加载8个图像，我想暂停每个图像的循环，等待它加载。所以而不是：

 double* prow = mat.ptr<double>(i);
 double val = prow(j);

我想要类似的东西：

image = new Image()
image.onload = function(){ /*do anything*/ }
image.src = "abc.svg"

有没有办法使用Javascript来做到这一点？提前谢谢。

Answer 1

你不能停顿。但是，您可以延迟下一个图像加载，直到上一次加载。例如：

var images = ['path1', 'path2', 'path3', 'path4'];

(function next(images) {
    if (images.length) {
        var img = new Image();
        img.onload = function() { next(images); };
        img.src = images.shift();   
    }
})(images.slice());

在这种情况下，只有在获取上一个图像后才会加载下一个图像。如果图像src可能被破坏，请确保您也处理，例如img.onload = img.onerror = function() { next(images); };。

＆＃13;

var images = [1, 2, 3, 4];

(function next(images) {
    if (images.length) {
    	var img = new Image();
        img.onload = function() { 
       	    document.body.appendChild(img);
            setTimeout(function() { next(images); }, 500);
        };
        img.src = images.shift();
    }
})(images.slice());

＆＃13;

<base href="http://lorempixel.com/100/100/food/">

＆＃13;

Answer 2

您可能需要考虑使用Deferred对象，以便在图像准备就绪时执行。

有几个库可以使用延期承诺。为简单起见，这是一个jquery的例子。可能存在小错误，我从内存中编写了这个错误。

var arrayOfImages = ["image1.png", "image2.png", "image3.png", "image4.png"]; 

var isLoaded = function(img)
{
    var deferred = $.Deferred(); // Deferred Promise Object
    var imgObj = $("<img src='"+img+"'/>");
    if(imgObj.height > 0 || imgObj.width > 0) // image is already loaded
    {
        deferred.resolve(true); // Resolving the Promise triggers any function assigned to done to execute.
    }
    else
    {
        imgObj.on("load", function(e)
        {
            deferred.resolve(true); // Resolving the Promise triggers any function assigned to done to execute.
        });
        window.setTimeout(function() // Timeout in case the image takes to long to execute
        {
            if(deferred.status() !== "resolved") // This maybe be deferred.state() in jquery
            {
                console.warn("isLoaded Failed");
                deferred.reject(false); // Rejecting a promise will cause all methods assigned to fail to execute.
            }
        }, 7500);
    }
    return deferred.promise();
}; 

var deferredArray = [];
var len = arrayOfImages.length;
for(var i=0;i<len;i++)
{
    var imagePromise = isLoaded(arrayOfImages[i]);
}

$.when(imagePromise, function()
{
    // All Images Loaded
});

如果您只想查看一张图片

isLoaded(arrayOfImages[2]).done(function(result) // checking only image 2 of the array
{
    // this image is loaded
}).fail(function(errorObj)
{
    // this image failed to load
});

Answer 3

尝试使用Promise加载图片

deferimg.js

JavaScript：加载图像时继续执行

3 个答案: