• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 537
  • Last Modified:

Complete loading animation on each individual image?

Hi there,

I am currently using jQuery to manipulate a loading placeholder image that covers loading thumbnails on my website.  Basically, the script waits for the page to finish loading, and then hides the loading animation.  You can see the effect at my site, here.

On a page that has many images to load, however, it can take quite some time before the thumbnails appear.

I had considered using some sort of lazy-loading technique, but I think it might be simpler to just switch the trigger for the loading animation hiding from the completion of the loading of the entire page to just the completion of loading of each particular image.  What's the easiest way to accomplish this?

Script as it stands follows:

<script type="text/javascript">
$(window).load(function() {
$('.loading').fadeOut('slow');
});
</script>

Open in new window


Let me know if there's any other information that would be helpful.  Thanks!
0
SR_Tech
Asked:
SR_Tech
3 Solutions
 
andrewkhanCommented:
Something like this?

An event that fires when an element is loaded.


$('div[id^="photo"]').load(function() {

$(this+"_loading").fadeOut('slow');
 
});

Have your photos with an ID oh photo1 photo2 photo3 etc. And then have each loading animation have an id of photo1_loading photo2_loading photo3_loading etc etc.

the id^=photo is a query that finds any divs with an ID that starts with photo. It then tests if that object has loaded. If it has it animates out the element of this (the photo you just queries) with _loading added to the end.

Hope I help.

Andrew
0
 
SR_TechAuthor Commented:
Okay, I have set that up as directed and it is not working... The loading animations fail to fade out.  Can you perhaps have a look at my source and let me know what I'm doing wrong?

<!DOCTYPE html> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<title> Home - Element17 Photography</title> 
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	<meta name="keywords" content="Element17 Photography" /> 
	<meta name="description" content="This is Element17 Photography" /> 
	<link rel="stylesheet" type="text/css" href="http://element17.com/plog-content/themes/diffuser/gallery.css" /> 
	<script type="text/javascript" src="http://element17.com/plog-content/themes/diffuser/dynamics.js"></script> 
	<!--[if lt IE 8]>
		<style>
			/* this is a workaround for IE6/7 because they do not support inline-block correctly */
			.slides li { zoom: 1; display: inline; }
		</style>
	<![endif]--> 
<script type="text/javascript" src="plog-includes/js/jquery-1.5.1.js"></script> 
<script type="text/javascript" src="plog-includes/js/jquery.dimensions.min.js"></script> 
<script type="text/javascript" src="plog-includes/js/jquery.cycle.all.min.js"></script> 
 
<script type="text/javascript"> 
$(function() {
	if ($(window).width() >= 1480) {$('div#wrapper').css('width', '1465px'); }
	else {$('div#wrapper').css('width', '980px'); }
    $(window).bind('resize', function() {
	if ($(window).width() >= 1480) {$('div#wrapper').css('width', '1465px'); }
	else {$('div#wrapper').css('width', '980px'); }
    }).trigger('resize');
});
</script> 
 
<script type="text/javascript"> 
var minTime = 5000;
var maxTime = 10000;
$(document).ready(function() {
    $('.slideshow').each(function(ind) {
        $(this).cycle({
        timeout:Math.floor((Math.random()*(maxTime-minTime)+minTime)),
        speed:2500});
    });
});
</script> 
 
<script type="text/javascript"> 
$('div[id^="photo"]').load(function() {
$(this+"_loading").fadeOut('slow');
});
</script> 
 
<script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-3135651-3']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script> 
 
  
</head> 
 
<body> 


<!-- Site-wide "header" - begins inside <body> and contains top-level containers -->



<div id="centering">



<div id="wrapper">



<div id="header">

<div style="display:table; width:100%;">

<div style="display:table-row;">

<div style="display:table-cell; vertical-align:middle;">

				<a href="index.php">

					<img src="./plog-content/themes/diffuser/images/logo.png" alt="Element17 Photography" />

				</a>

</div>



<div style="display:table-cell; vertical-align:middle; text-align:right;">



				<div id="breadcrumb-links"><strong>Home</strong></div></div>



</div>

</div>

</div>



<div id="main-container">

<div id="ac-container">







	<div id="collections">



	

				



		<div class="thumb-holder">

		<div class="hovering">

		<a href='http://element17.com/index.php?level=album&amp;id=41'>		<span class="loading" id='photo1_loading' style="height:150px; width:475px;">&nbsp;</span>

		<span class="slideshow"><img class='thumb-large' id='photo1' src='plog-content/thumbs/natura/natura/small/155-20100101-dsc_5328.jpg' alt='thumb' /><img class='thumb-large' id='photo1' src='plog-content/thumbs/natura/natura/small/119-20071025-dsc_0881.jpg' alt='thumb' /><img class='thumb-large' id='photo1' src='plog-content/thumbs/natura/natura/small/143-20090106-dsc_8412.jpg' alt='thumb' /><img class='thumb-large' id='photo1' src='plog-content/thumbs/natura/natura/small/139-20081015-dsc_5958.jpg' alt='thumb' /><img class='thumb-large' id='photo1' src='plog-content/thumbs/natura/natura/small/123-20071222-dsc_1916.jpg' alt='thumb' /></span></a>

			<div class="title-data">

				<h2><a href='http://element17.com/index.php?level=album&amp;id=41'>Natura</a></h2>

				From the subatomic to the cosmic; living plants, animals, and landscapes.<br />

				<div class='exif'>Contains 32 Images</div>				</div>

			</div>

		</div>

		

	

		

				



		<div class="thumb-holder">

		<div class="hovering">

		<a href='http://element17.com/index.php?level=album&amp;id=42'><img src='plog-content/images/star.png' style='position:absolute; z-index:99954;left:0; margin:5px 0 0 5px' alt='Constructs' />		<span class="loading" id='photo2_loading' style="height:150px; width:475px;">&nbsp;</span>

		<span class="slideshow"><img class='thumb-large' id='photo2' src='plog-content/thumbs/constructs/constructs/small/64-20080930-dsc_5361.jpg' alt='thumb' /><img class='thumb-large' id='photo2' src='plog-content/thumbs/constructs/constructs/small/52-20071011-dsc_0548.jpg' alt='thumb' /><img class='thumb-large' id='photo2' src='plog-content/thumbs/constructs/constructs/small/84-20091203-dsc_5176.jpg' alt='thumb' /><img class='thumb-large' id='photo2' src='plog-content/thumbs/constructs/constructs/small/61-20080910-dsc_4860.jpg' alt='thumb' /><img class='thumb-large' id='photo2' src='plog-content/thumbs/constructs/constructs/small/69-20090225-dsc_0147-2.jpg' alt='thumb' /></span></a>

			<div class="title-data">

				<h2><a href='http://element17.com/index.php?level=album&amp;id=42'>Constructs</a></h2>

				Objects and structures hewn by mankind.<br />

				<div class='exif'>Contains 53 Images</div>				</div>

			</div>

		</div>

		

	

		

				



		<div class="thumb-holder">

		<div class="hovering">

		<a href='http://element17.com/index.php?level=album&amp;id=43'><img src='plog-content/images/star.png' style='position:absolute; z-index:99954;left:0; margin:5px 0 0 5px' alt='People' />		<span class="loading" id='photo3_loading' style="height:150px; width:475px;">&nbsp;</span>

		<span class="slideshow"><img class='thumb-large' id='photo3' src='plog-content/thumbs/people/people/small/184-20091203-dsc_5111.jpg' alt='thumb' /><img class='thumb-large' id='photo3' src='plog-content/thumbs/people/people/small/179-20091004-dsc_4480-2.jpg' alt='thumb' /><img class='thumb-large' id='photo3' src='plog-content/thumbs/people/people/small/446-20110423-dsc_1031.jpg' alt='thumb' /><img class='thumb-large' id='photo3' src='plog-content/thumbs/people/people/small/174-20090718-20090718-dsc_2992.jpg' alt='thumb' /><img class='thumb-large' id='photo3' src='plog-content/thumbs/people/people/small/447-20110423-dsc_1042.jpg' alt='thumb' /></span></a>

			<div class="title-data">

				<h2><a href='http://element17.com/index.php?level=album&amp;id=43'>People</a></h2>

				Human beings: portraits and sports photography.<br />

				<div class='exif'>Contains 22 Images</div>				</div>

			</div>

		</div>

		

	

		

				



		<div class="thumb-holder">

		<div class="hovering">

		<a href='http://element17.com/index.php?level=album&amp;id=44'>		<span class="loading" id='photo4_loading' style="height:150px; width:475px;">&nbsp;</span>

		<span class="slideshow"><img class='thumb-large' id='photo4' src='plog-content/thumbs/macro/macro/small/421-20090415-dsc_10511.jpg' alt='thumb' /><img class='thumb-large' id='photo4' src='plog-content/thumbs/macro/macro/small/112-dsc_2204.jpg' alt='thumb' /><img class='thumb-large' id='photo4' src='plog-content/thumbs/macro/macro/small/101-20080420-dsc_3079.jpg' alt='thumb' /><img class='thumb-large' id='photo4' src='plog-content/thumbs/macro/macro/small/110-20090615-20090615-dsc_1645.jpg' alt='thumb' /><img class='thumb-large' id='photo4' src='plog-content/thumbs/macro/macro/small/104-20081026-dsc_6141.jpg' alt='thumb' /></span></a>

			<div class="title-data">

				<h2><a href='http://element17.com/index.php?level=album&amp;id=44'>Macro</a></h2>

				Images of tiny things blown up larger than life-size.<br />

				<div class='exif'>Contains 16 Images</div>				</div>

			</div>

		</div>

		

	

		

				



		<div class="thumb-holder">

		<div class="hovering">

		<a href='http://element17.com/index.php?level=collection&amp;id=8'>		<span class="loading" id='photo5_loading' style="height:150px; width:475px;">&nbsp;</span>

		<span class="slideshow"><img class='thumb-large' id='photo5' src='plog-content/thumbs/aggregate/geert-maas/small/441-20110402-dsc_0783.jpg' alt='thumb' /><img class='thumb-large' id='photo5' src='plog-content/thumbs/aggregate/bibliotheca/small/160-20081119-dsc_6966.jpg' alt='thumb' /><img class='thumb-large' id='photo5' src='plog-content/thumbs/aggregate/geert-maas/small/439-20110402-dsc_0711.jpg' alt='thumb' /><img class='thumb-large' id='photo5' src='plog-content/thumbs/aggregate/chiaroscuro/small/26-dsc_2197.jpg' alt='thumb' /><img class='thumb-large' id='photo5' src='plog-content/thumbs/aggregate/bibliotheca/small/424-20081119-DSC_7004-1.jpg' alt='thumb' /></span></a>

			<div class="title-data">

				<h2><a href='http://element17.com/index.php?level=collection&amp;id=8'>Aggregate</a></h2>

				Thematic groupings of photographs.<br />

				<div class='exif'>Contains 7 Albums</div>				</div>

			</div>

		</div>

		

	

		

				



		<div class="thumb-holder">

		<div class="hovering">

		<a href='http://element17.com/index.php?level=collection&amp;id=9'>		<span class="loading" id='photo6_loading' style="height:150px; width:475px;">&nbsp;</span>

		<span class="slideshow"><img class='thumb-large' id='photo6' src='plog-content/thumbs/travel/memorial-to-the-murdered-jews-of-europe/small/411-20100428-dsc_1100.jpg' alt='thumb' /><img class='thumb-large' id='photo6' src='plog-content/thumbs/travel/burgundy/small/294-dsc_9074-2.jpg' alt='thumb' /><img class='thumb-large' id='photo6' src='plog-content/thumbs/travel/fairytale-road/small/375-20100426-dsc_0575.jpg' alt='thumb' /><img class='thumb-large' id='photo6' src='plog-content/thumbs/travel/burgundy/small/283-20100412-dsc_8806.jpg' alt='thumb' /><img class='thumb-large' id='photo6' src='plog-content/thumbs/travel/munich-and-frankfurt/small/350-20100423-dsc_9911.jpg' alt='thumb' /></span></a>

			<div class="title-data">

				<h2><a href='http://element17.com/index.php?level=collection&amp;id=9'>Travel</a></h2>

				Things from far and away.<br />

				<div class='exif'>Contains 9 Albums</div>				</div>

			</div>

		</div>

		

	

		

	</div>



	

</div>

</div>

<div id="footer">



	<div id="link-back">The photography and design of element17.com is copyright <b>&copy; 2007-2011</b> by <b><a href="mailto:steve@element17.com">Steve Gaucher</a></b> and may not be reproduced/republished in any manner without prior consent.</div></div> 



</div><!-- wrapper -->

</div><!-- centering --> 
</body> 
</html>

Open in new window

0
 
David S.Commented:
Try this instead:
$(document).ready(function() {
	$('.thumb-large').load(function() {
		$(this).parent().prevAll('.loading').fadeOut('slow');
	});
});

Open in new window

You have non-unique IDs in there. Any given ID may only be used for a single element (per document).

Don't use alt-text of "thumb". If you don't want to write a short description that someone who can't see the image would find helpful, leave the value blank/empty.
0
 
gavsmithCommented:
Some people have had problems using this method (especially when the images are already cached).

It has been mentioned it being more reliable if you bind the load event before you set the src of your images please see http://api.jquery.com/load-event/ and read the comments at the bottom.

Also here's an article on how it should be done... with an extra bit at the bottom to show how you can do it using ajax: http://jqueryfordesigners.com/image-loading/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now