JavaScript and client side scripting.
Moderator: General Moderators
ggalan
Forum Newbie
Posts: 8 Joined: Fri Oct 01, 2010 11:54 am
Post
by ggalan » Fri Oct 01, 2010 11:57 am
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>
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Fri Oct 01, 2010 3:03 pm
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
Post
by ggalan » Fri Oct 01, 2010 3:07 pm
thank you for your response, can you give an example please
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Fri Oct 01, 2010 3:18 pm
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
Post
by ggalan » Fri Oct 01, 2010 7:08 pm
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
Post
by ggalan » Fri Oct 01, 2010 10:15 pm
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>