私の質問を説明するためにここにデモがあります。
http://www.ttmt.org.uk/forum/gallery2/
http://jsfiddle.net/ttmt/tmyqj/11/
私は一日中これをやろうとしてきましたが、完全に間違った考えを持っているかどうかはわかりません.
ページからすぐに浮かんでいる画像のリストがあります。
画像を左から右に一度に 1 つずつロードしたいと思います。1 つのイメージが完全にロードされると、次のイメージが開始されます。
他のプリロードのアイデアを試してみましたが、それらはすべてすべての画像をプリロードしているように見えるので、すべての画像がロードされるのを待っています。
私の考えは、すべてのliを配列に配置してから、ページからliを削除することでした。次に、liを1つずつ追加して、画像がロードされたことを確認してから、次の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>