?
Solved

Complete loading animation on each individual image?

Posted on 2011-04-26
6
Medium Priority
?
529 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!
0
Comment
Question by:SR_Tech
4 Comments
 
LVL 2

Assisted Solution

by:andrewkhan
andrewkhan earned 668 total points
ID: 35465651
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
 

Author Comment

by:SR_Tech
ID: 35467753
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
 
LVL 43

Assisted Solution

by:David S.
David S. earned 668 total points
ID: 35471933
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
 
LVL 10

Accepted Solution

by:
gavsmith earned 664 total points
ID: 35473955
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question