download image first then apply fadein

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ggalan
Forum Newbie
Posts: 8
Joined: Fri Oct 01, 2010 11:54 am

download image first then apply fadein

Post by ggalan »

i have some jquery which loads 1 image first then applies a fade. how would i be able to apply a fade to a series of images then apply the fade AFTER they have been downloaded and cached?
like an array of images in an unordered list

Code: Select all

<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>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: download image first then apply fadein

Post by pickle »

Loop through your images, adding the fadeOut to the load() event of each image.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ggalan
Forum Newbie
Posts: 8
Joined: Fri Oct 01, 2010 11:54 am

Re: download image first then apply fadein

Post by ggalan »

thank you for your response, can you give an example please
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: download image first then apply fadein

Post by pickle »

Well you're already doing most of the work - you're just specifying it for a specific image "images/main.jpg". Move that functionality into a loop, and all your images into an array. On each iteration of the array, attach your load() code.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ggalan
Forum Newbie
Posts: 8
Joined: Fri Oct 01, 2010 11:54 am

Re: download image first then apply fadein

Post by ggalan »

i seem to be having issues with this, can you please take a look at my code

Code: Select all

<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("nav");
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>
ggalan
Forum Newbie
Posts: 8
Joined: Fri Oct 01, 2010 11:54 am

Re: download image first then apply fadein

Post by ggalan »

having a tough time with this, how do i loop thru my li elements and apply that .load??

Code: Select all

<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 aImg = $("#divContent li").map(function() {
	return $(this).attr("src");
	

	$(aImg).load(function () {
	$(this).hide();
	$('#divContent li').append(this);
	
	$(this).fadeIn();
	 $("#divContent li).each
	}).attr('src', aImg);
	
	});
	
	
});
</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>
Post Reply