Page 1 of 1
download image first then apply fadein
Posted: Fri Oct 01, 2010 11:57 am
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>
Re: download image first then apply fadein
Posted: Fri Oct 01, 2010 3:03 pm
by pickle
Loop through your images, adding the fadeOut to the load() event of each image.
Re: download image first then apply fadein
Posted: Fri Oct 01, 2010 3:07 pm
by ggalan
thank you for your response, can you give an example please
Re: download image first then apply fadein
Posted: Fri Oct 01, 2010 3:18 pm
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.
Re: download image first then apply fadein
Posted: Fri Oct 01, 2010 7:08 pm
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>
Re: download image first then apply fadein
Posted: Fri Oct 01, 2010 10:15 pm
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>