Question

我的页面上有4个图像html元素。

我已经在某处（无法记住/找到哪里）阅读了图像的加载，而与html页面的其余部分无关。

所以，如果同时通过定时器加载4张图像，那么：

 tmrImage1 = setTimeout('Load Image 1 Function), 10000);
 tmrImage2 = setTimeout('Load Image 2 Function), 10000);
 tmrImage3 = setTimeout('Load Image 3 Function), 10000);
 tmrImage4 = setTimeout('Load Image 4 Function), 10000);

图像是按顺序加载还是彼此独立加载？

不确定我是否知道我在说什么......

Answer 1

new Image()将始终异步加载图像.src并独立于正在加载的其他图像。由于它们是独立加载的，因此无法保证按顺序加载它们。

这是一个图像加载器的示例，它预加载所有需要的图像，然后调用start。调用start时，所有图像都已完全加载并准备好显示：

// image loader

// put the paths to your images in imageURLs[]
var imageURLs=[];  
// push all your image urls!
imageURLs.push("images/image1.png");
imageURLs.push("images/image2.png");
imageURLs.push("images/image3.png");
imageURLs.push("images/image4.png");

// the loaded images will be placed in imgs[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

Answer 2

无论setTimeout如何，浏览器都会打开多个连接来下载图像等。网上有一些测试可以测试您的特定浏览器。搜索“浏览器最大连接数”。

鉴于这些信息，假设您的浏览器限制至少有四个剩余连接，这四个图像将随着setTimeout函数触发而一个接一个地开始下载，因为JavaScript是单线程的。他们都会在很短的时间内开始。最小的图像将（可能）首先完成，等等。

编辑添加：JavaScript可以触发浏览器事件，但是在下载图像的情况下，可能还有许多其他事件，完成的是浏览器，而不是JavaScript >行动。这意味着JavaScript是单线程的这一事实只会引起关注，因为这些事件是以给定的顺序触发的。

在HTML页面上异步加载图像

2 个答案: