I just want to understand what you are trying to do.
You want to wait until all of the images on the page have loaded, then fade them in one by one.
Is that correct?
I found the following script on the jQuery forums and adapted it to suit your needs.
It takes an array of images, loads them sequentially, appendis them to your <ul> element and fades them in.
This should be more like what you want.
<!DOCTYPE html>
<html>
<head>
<base href="http://www.ttmt.org.uk/load/images/" />
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<ul id="images"></ul>
</div><!-- #wrap -->
<script>
$(function() {
function loadImages(arr) {
if (arr.length !== 0) {
loadImage(arr);
}
}
function imageLoaded(img) {
var li = $("<li></li>").append(img);;
$(li).hide().appendTo($("#images")).fadeIn();
}
function loadImage(arr) {
var url = arr.shift(),
img = new Image(),
timer;
img.src = url;
if (img.complete || img.readyState === 4) {
imageLoaded(img);
if (arr.length !== 0) {
loadImage(arr);
}
} else {
// handle 404 using setTimeout set at 10 seconds, adjust as needed
timer = setTimeout(function() {
if (arr.length !== 0) {
loadImage(arr);
}
$(img).unbind("error load onreadystate");
}, 10000);
$(img).bind("error load onreadystatechange", function(e) {
clearTimeout(timer);
if (e.type !== "error") {
imageLoaded(img);
}
if (arr.length !== 0) {
loadImage(arr);
}
});
}
}
var imgArr = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg"];
loadImages(imgArr);
});
</script>
</body>
</html>