我在这里有一个演示来说明我的问题。
http://www.ttmt.org.uk/forum/gallery2/
http://jsfiddle.net/ttmt/tmyqj/11/
我整天都在尝试这样做，我不知道我是否完全错误的想法。
我有一个从页面上浮动的图像列表。
我希望图像从左到右一次加载一个。当一个图像完全加载时，下一个图像将开始。
我尝试过其他预加载想法，但它们似乎都预加载了所有图像，所以我正在等待所有图像加载。
我的想法是将所有 li 放在一个数组中，然后从页面中删除 li，然后我可以一次添加一个 li，检查图像是否已加载，然后加载下一个 li。
这种工作，但图像仍然随机加载，我无法弄清楚如何在添加下一个图像之前检查图像是否已加载。
这是一种愚蠢的做法吗？
我可以检查图像是否已完全加载。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
#header{
position:fixed;
margin:20px 0 0 20px;
}
#header #logo{
width:100px;
height:80px;
background:red;
}
ul#gallery {
margin:120px 0 0 0;
float:left;
height:500px;
margin-right:-20000px;
}
ul#gallery li{
display:inline;
}
ul#gallery li img{
float:left;
height:100%;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
</div><!-- #logo -->
</div><!-- #header -->
<ul id="gallery">
<li><a href=""><img src="images/01.jpg" /></a></li>
<li><a href=""><img src="images/02.jpg" /></a></li>
<li><a href=""><img src="images/03.jpg" /></a></li>
<li><a href=""><img src="images/04.jpg" /></a></li>
<li><a href=""><img src="images/05.jpg" /></a></li>
<li><a href=""><img src="images/06.jpg" /></a></li>
<li><a href=""><img src="images/07.jpg" /></a></li>
<li><a href=""><img src="images/08.jpg" /></a></li>
<li><a href=""><img src="images/09.jpg" /></a></li>
<li><a href=""><img src="images/10.jpg" /></a></li>
<li><a href=""><img src="images/11.jpg" /></a></li>
<li><a href=""><img src="images/13.jpg" /></a></li>
<li><a href=""><img src="images/14.jpg" /></a></li>
<li><a href=""><img src="images/15.jpg" /></a></li>
</ul>
<script>
$(function(){
var imgArr=[];
var lis = $('#gallery li')
lis.each(function(){
imgArr.push(this.outerHTML);
$(this).remove();
})
window.ili = 0;
rePopulate();//Add the li's back one at a time.
function rePopulate(){
var newli = $('#gallery').append(imgArr[ili]);
var newImg = newli.find('img');
//console.log(newImg);
if(window.ili<=imgArr.length){
//Need to check here if the image has loaded completely before loading the next
window.ili++;
rePopulate();
}
}
})
</script>
</body>
</html>