gpt4 book ai didi

javascript - 加载排序图片

转载 作者:行者123 更新时间:2023-11-30 05:51:45 25 4
gpt4 key购买 nike

我有一些图片,我希望他们必须每 10 秒整理一次页面。

如下:

  • 照片 1 已完全加载
  • 等待 10 秒
  • 在照片 1 之后,照片 2 已完全加载
  • 等待 10 秒
  • 在照片 2 之后,照片 3 已完全加载
  • 等待 10 秒

, ...

直到我们完成所有照片。

我的问题:

方法加载不起作用&我不知道等待的方法

这是我的代码:

<html>
<head>
<title></title>
<script type="text/javascript" src='jq.js'></script>
</head>
<body>
<div></div>
<script type="text/javascript">
var images=["images/0.jpg",
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/7.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg"
];
for (var i=0;i<images.length;i++){
var imgtag = '<img src='+images[i]+' />';
$(imgtag).load(function() {
$('div').append(imgtag);
//Wait 10 sec ==> Is there a function to Waiting :-??
}
}
</script>
</body>
</html>

感谢您的回复。

最佳答案

首先需要等待DOM就绪事件,然后使用递归回调:

$(function() {   // on DOM ready

var images = [
"images/0.jpg",
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/7.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg"
];

(function loadImg(index) {
if (index >= images.length) return; // no more image to load

$('#divId').append( $('<img />').attr('src', srcImg).load(function() {
// invoke this function again in 10 secs incrementing index by 1
setTimeout(function() { loadImg(index + 1); }, 10000);
}) );

})(0); // initiate loading sequence with first image index

});

关于javascript - 加载排序图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14357857/

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