逐个加载图像 [英] loading images one by one
问题描述
嗨
我有以下html：
< div id =" menu">
< div id =" m1">< a href =" m1.php">< img src =" m1.gif" alt =" m1">< / a>< / div>
< div id =" m2">< a href =" m2.php"> < img src =" m2.gif" alt =" m2">< / a>< / div>
< div id =" m3">< a href =" m3.php"> < img src =" m3.gif" alt =" m3">< / a>< / div>
< div id =" m4">< a href =" m4.php"> < img src =" m4.gif" alt =" m4">< / a>< / div>
< div id =" m5">< a href =" m5.php"> < img src =" m5.gif" alt =" m5">< / a>< / div>
< / div>
我要加载图像（1-5），一个，每个加载一个
0.5秒。
我有一些想法如何做到这一点，但我想找到最聪明的方式
函数onload（）{
for（i = 1; i< 6; i ++）{
el = getelementbyid（''m''。i）;
el = el.style.display =" none" ;;
}
for（i = 1; i< 6; i ++）{
服务员（0.5）
el = getelementbyid（''m''。i）;
el = el.style.display =" none" ;;
}
功能服务员（$秒）{
.... ???
}
任何提示？
秒）{
.... ???
}
任何提示？
windandwaves说：
你好
我有关注ng html：
< div id =" menu">
< div id =" m1">< a href =" m1.php"> < img src =" m1.gif" alt =" m1">< / a>< / div>
< div id =" m2">< a href =" m2.php">< img src = QUOT; m2.gif" alt =" m2">< / a>< / div>
< div id =" m3">< a href =" m3.php">< img src = QUOT; m3.gif" alt =" m3">< / a>< / div>
< div id =" m4">< a href =" m4.php">< img src = QUOT; m4.gif" alt =" m4">< / a>< / div>
< div id =" m5">< a href =" m5.php">< img src = QUOT; m5.gif" alt =" m5">< / a>< / div>
< / div>
我要加载图片（1-5），一个当时，每隔0.5秒加载一次。
我有一些想法如何做到这一点，但我想找到最聪明的方式
函数onload （）{
（i = 1; i< 6; i ++）{
el = getelementbyid（''m''。i）;
el = el.style.display =" ;没有;
}
for（i = 1; i< 6; i ++）{
服务员（0.5）
el = getelementbyid（''m''。i） ;
el = el.style.display =" none" ;;
}
职能服务员（
秒）{
.... ???
}
任何提示？
像网页这样的事件驱动系统一般都不要没有任何等待或等待或休眠功能的
，因为你希望它能够始终能够响应鼠标点击等等，而是安排一些动作
在指定的延迟后发生：
< html>
< head>
< script type =" text / javascript">
功能揭示（ n）{
if（document.getElementById（" m" + n））{
document.getElementById（" m" + n）.style.display = " bloc k";
setTimeout（" reveal（" +（n + 1）+"）"，500）;
}
}
< / script>
< style type =" text / css">
＃m1 {display：none}
＃m2 {display：none}
＃m3 {display：none}
＃m4 {display：none}
< / style>
< / head>
< body onload =" reveal（1）">
< div id =" m1">< img src =" http：//www.azphx.com/dhtml/tmp/alpha6464.jpg">< / div>
< div id =" m2">< img src =" http：//www.azphx.com/dhtml/tmp/beta6464.jpg">< / div> ;
< div id =" m3">< img src =" http：//www.azphx.com/ dhtml / tmp / gamma6464.jpg">< / div>
< div id =" m4">< img src =" http：//www.azphx.com /dhtml/tmp/delta6464.jpg"></div>
< / body>
< / html>
Hi
I have the following html:
<div id="menu">
<div id="m1"><a href="m1.php"><img src="m1.gif" alt="m1"></a></div>
<div id="m2"><a href="m2.php"><img src="m2.gif" alt="m2"></a></div>
<div id="m3"><a href="m3.php"><img src="m3.gif" alt="m3"></a></div>
<div id="m4"><a href="m4.php"><img src="m4.gif" alt="m4"></a></div>
<div id="m5"><a href="m5.php"><img src="m5.gif" alt="m5"></a></div>
</div>
and I want to load on the images (1-5), one at the time, loading one every
0.5 seconds.
I have some thought on how to do this, but i wanted to find the smartest way
function onload() {
for (i=1; i< 6; i++) {
el = getelementbyid(''m''.i);
el = el.style.display = "none";
}
for (i=1; i< 6; i++) {
waiter(0.5)
el = getelementbyid(''m''.i);
el = el.style.display = "none";
}
function waiter($seconds) {
....???
}
any hints?
seconds) {
....???
}
any hints?
windandwaves said:
Hi
I have the following html:
<div id="menu">
<div id="m1"><a href="m1.php"><img src="m1.gif" alt="m1"></a></div>
<div id="m2"><a href="m2.php"><img src="m2.gif" alt="m2"></a></div>
<div id="m3"><a href="m3.php"><img src="m3.gif" alt="m3"></a></div>
<div id="m4"><a href="m4.php"><img src="m4.gif" alt="m4"></a></div>
<div id="m5"><a href="m5.php"><img src="m5.gif" alt="m5"></a></div>
</div>
and I want to load on the images (1-5), one at the time, loading one every
0.5 seconds.
I have some thought on how to do this, but i wanted to find the smartest way
function onload() {
for (i=1; i< 6; i++) {
el = getelementbyid(''m''.i);
el = el.style.display = "none";
}
for (i=1; i< 6; i++) {
waiter(0.5)
el = getelementbyid(''m''.i);
el = el.style.display = "none";
}
function waiter(
seconds) {
....???
}
any hints?
Event-driven systems like web pages generally don''t have any sort
of wait or sleep function, because you want it to always be able
to respond to mouse clicks, etc. Instead, you schedule some action
to occur after a specified delay:
<html>
<head>
<script type="text/javascript">
function reveal(n) {
if(document.getElementById("m"+n)) {
document.getElementById("m"+n).style.display="bloc k";
setTimeout("reveal("+(n+1)+")",500);
}
}
</script>
<style type="text/css">
#m1 {display:none}
#m2 {display:none}
#m3 {display:none}
#m4 {display:none}
</style>
</head>
<body onload="reveal(1)">
<div id="m1"><img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"></div>
<div id="m2"><img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"></div>
<div id="m3"><img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"></div>
<div id="m4"><img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"></div>
</body>
</html>
这篇关于逐个加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
