gpt4 book ai didi

javascript - 我想将图像加载到 "wave"..

转载 作者:行者123 更新时间:2023-12-03 03:39:01 27 4
gpt4 key购买 nike

<html>
<section>

<style>
img{
width: 150px;
height:150px;
float:left;
}
</style>
</section>


<script>

var img = undefined,
section = document.querySelector('section'),
images=[
"http://www.psdgraphics.com/file/red-number-0.jpg",
"http://www.psdgraphics.com/file/red-number-1.jpg",
"http://www.psdgraphics.com/file/red-number-2.jpg",
"http://www.psdgraphics.com/file/red-number-3.jpg",
"http://www.psdgraphics.com/file/red-number-4.jpg",
"http://www.psdgraphics.com/file/red-number-5.jpg",
"http://www.psdgraphics.com/file/red-number-6.jpg"
];

function loadImage( i ){
img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src=images[i];
}
for(var i=0;i<images.length;i++){

loadImage(i)

}

</script>


</html>

这是我的代码,目前我同时收到所有图像......我想仅在加载前一个图像后才加载每个图像..

任何帮助将不胜感激

最佳答案

只需将伪递归回调分配给 onload 处理程序:

function loadImage( i ){
if(i >= images.length) return;
var img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src=images[i];
img.onload = () => loadImage(i+1);
}

loadImage(0);

或者使用一些新的 ES 7 东西:

(async function(){

for(var i = 0; i < images.length; i++){
var img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src=images[i];

await new Promise(r => image.onload = r );
}

})()

关于javascript - 我想将图像加载到 "wave"..,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45719640/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com