download image first then apply fadein

**ggalan** · 10-02-2010, 01:52 AM

i have some jquery which loads an image then applies a fade

Code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
        var img = new Image();
        $(img).load(function () {
        $(this).hide();
        $('#divContent').append(this);
        $(this).fadeIn();
        }).attr('src', 'images/main.jpg');
});
</script>
</head>
<body>
<div id="divContent"></div>
</body>
</html>

however i am trying to apply this to multiple images through a loop, but unsuccessful. can anyone lend a hand

Code:

<html>
<head>
<style>
#divContent ul li{display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {

var oBox = document.getElementById("divContent");
var aKids = oBox.getElementsByTagName("li");

var img = new Image();
        
for (var iKid = 0; iKid < aKids.length; iKid++)
{

        $(img).load(function () {
        $(this).hide();
        $('#divContent').append(this);
        $(this).fadeIn();
        }).attr('src',  aKids[iKid]);
}


});
</script>
</head>
<body>
<div id="divContent">
        <ul>
                <li><img src="images/main.jpg" width="512" height="384" /></li>
                <li><img src="images/main2.jpg" width="512" height="384" /></li>
                <li><img src="images/main3.jpg" width="512" height="384" /></li>
        </ul>
</div>
</body>
</html>

**jscheuer1** · 10-02-2010, 03:31 AM

There could be other problems. But there is no:

Code:

var oBox = document.getElementById("nav");

**jscheuer1** · 10-02-2010, 05:27 AM

Not sure exactly what you're going for, but I played around with this quite a bit and came up with this:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#divContent ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#divContent ul li img {
	display: block;
	width: 140px;
	height: 225px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#divContent ul li {
	margin-top: -4px;
}
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
document.write('\n<style>\n' +
'#divContent ul li {\n' +
'	display: none;\n' +
'}\n' +
'</style>\n');
jQuery(function($){

	var oBox = $('#divContent'), aKids = oBox.find('li'), fadeRate = 1000, inc = 1000, ctr = aKids.size();

	aKids.each(function(){
		var img = new Image(), li = $(this);
		$(img).load(function(){
			if(!--ctr){
				aKids.each(function(){
					$(this).fadeIn(fadeRate += inc);
				});
			}
		}).attr('src', li.find('img').first().attr('src'));
	});
});
</script>
</head>
<body>
<div id="divContent">
	<ul>
		<li><img src="photo1.jpg" alt=""></li>
		<li><img src="photo2.jpg" alt=""></li>
		<li><img src="photo3.jpg" alt=""></li>
	</ul>
</div>
</body>
</html>

It's valid HTML 5 and corrects for IE 7 and less getting li's wrong (a good reason not to use them). The larger images are changed to ones I had handy. Change 'em back to test it out. Width and height of the images are set in style. Degrades well when no script available.

Demo:

http://home.comcast.net/~jscheuer1/s...fadein_ims.htm

**ggalan** · 10-02-2010, 02:19 PM

thanks!! will try it out
can i ask why you did this?

Code:

document.write('\n<style>\n' +
'#divContent ul li {\n' +
'	display: none;\n' +
'}\n' +
'</style>\n');

instead of placing this in the html?

**jscheuer1** · 10-02-2010, 03:06 PM

If it's in the HTML, even folks with javascript disabled/unavailable will be affected. This way only those with javascript will have the li elements display: none. With javascript they are later faded in. Without, one would never see them, except that by doing it this way, they will still be seen, just not faded in.

That's what I meant by:

Degrades well when no script available.

**ggalan** · 10-03-2010, 12:40 AM

very cool!
right now, the code downloads all the images in the loop then applys the fade but
can you have it so that as soon as each of the individual image gets downloaded then it fades in?
so that the user doesnt have to wait for the entire batch but rather each individual to load then fade in

**jscheuer1** · 10-03-2010, 02:26 AM

Yes. That invites disorder though. If your images are large in byte size, that might be preferable to having to wait for them all.

Most browsers will download 3 images synchronously. So you generally won't notice much of a difference unless they are competing with other page resources or they are of greatly differing bytes size, in which case things could look a bit disorderly.

Images for the web should be optimized for smallest byte size. If your images are, as I say - there shouldn't be much of a difference.

Here's the modified script (essentially the same with a stripped out section and one less variable):

Code:

document.write('\n<style>\n#divContent ul li {\n\tdisplay: none;\n}\n</style>\n');
jQuery(function($){

	var oBox = $('#divContent'), aKids = oBox.find('li'), fadeRate = 1000, inc = 1000;

	aKids.each(function(){
		var img = new Image(), li = $(this);
		$(img).load(function(){
			li.fadeIn(fadeRate += inc);
		}).attr('src', li.find('img').first().attr('src'));
	});
});

Note: I condensed the document.write() style to a one liner. But it's the same as before.

Here's an even more condensed version:

Code:

document.write('\n<style>\n#divContent ul li {\n\tdisplay: none;\n}\n</style>\n');
jQuery(function($){

	var fadeRate = 1000, inc = 1000;

	$('#divContent li').each(function(){
		var li = $(this);
		$(new Image()).load(function(){
			li.fadeIn(fadeRate += inc);
		}).attr('src', li.find('img').attr('src'));
	});
});

**ggalan** · 10-03-2010, 02:36 AM

awesome! i will study your code. thank you so much

**ggalan** · 10-03-2010, 03:27 AM

Yes. That invites disorder though. If your images are large in byte size

right now the code hides the li element so then the images are not structured, the quickest load appears in box 1 then as the larger images get loaded in it pushes the loaded boxes over for position 1. can this code somehow keep the order structure while performing the same load?

**jscheuer1** · 10-03-2010, 12:30 PM

Which order structure? The one established by the load times, or the one established by the order in which the images appear in the HTML code?

If the former:

Code:

document.write('\n<style>\n#divContent ul li {\n\tdisplay: none;\n}\n</style>\n');
jQuery(function($){

	var fadeRate = 1000, inc = 1000, ul = $('#divContent ul');

	$('#divContent li').each(function(){
		var li = $(this);
		$(new Image()).load(function(){
			ul.append(li.fadeIn(fadeRate += inc));
		}).attr('src', li.find('img').attr('src'));
	});
});

If the latter, I think that would require (in addition to script changes) abandoning the ul/li bit and using all div elements.

Thread: download image first then apply fadein

Thread Tools

Search Thread

download image first then apply fadein

Bookmarks

Bookmarks

Posting Permissions