We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Complete loading animation on each individual image?

Medium Priority
575 Views
Last Modified: 2013-11-19
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!
Comment
Watch Question

Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

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

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.