这里我有一个简单的测试代码,它在浏览器中加载图像测试。这里我使用异步 onload 事件在完成加载后将图像添加到 dom。图片加载得很好。问题是如果我连续重新加载页面多次图像序列更改。就好像 image-2 在 image-1 之前加载,有时 image-3 先加载,等等。我怎么能确保图像按顺序加载,例如每次加载页面时先加载图像 1,然后加载图像 2、图像 3 等。我该怎么做?
var images = ['cat1.png','cat2.jpg','cat3.jpg'];
var i = 0;
images.forEach(function(elem,index,arr){
var image=new Image();
image.onload = function(){
document.body.appendChild(image);
console.log(++i);
};
image.onerror = function(){
console.log('error occured');
}
image.src = elem;
image.style.width = '300px';
image.style.height = '300px';
});
最佳答案
您应该等待 onload
事件的回调。
如果它被触发,您可以迭代并加载下一张图片。
这确保图像将以正确的顺序加载(如在数组中)。
var images = [
'http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg',
'error',
'https://s2.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg',
'http://www.bharatint.com/img/categories/our-cat-shop-image.png'
], i = 0;
function loadImageArrayAsync(){
var image = new Image();
image.onload = function(){
document.body.appendChild(image);
if (i++ < images.length - 1) loadImageArrayAsync();
};
image.onerror = function(){
if (i++ < images.length - 1) loadImageArrayAsync();
}
image.src = images[i];
image.style.height = '300px';
image.style.width = '300px';
}
loadImageArrayAsync();
关于javascript - 如何确保图像按顺序加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39506073/