Help with this jquery image loading

JavaScript
1

I have this code that works well to replace the main image and also sets the link class active for link just pressed.

<script type=\\"text/javascript\\">
$(document).ready(function(){
	$(\\".thumbs a\\").click(function(){
		var largePath = $(this).attr(\\"href\\");
		var largeAlt = $(this).attr(\\"title\\");
		$(\\"a\\").removeClass(\\"viewing\\");
		$(this).addClass(\\"viewing\\");
		$(\\"#largeImg\\").attr({ src: largePath, alt: largeAlt });
		return false;
	});
});
</script>

I need to show a loading.gif everytime a link inside .thumbs is clicked, before the main image fully loads, how can i achieve this?

Also, how can i set on first page load, the 1st link to be active class?

2

Thanks once again for your time :slight_smile:
The images are being generated and as such often take up to 5-6 secs even tho small!

Ok the problem seems to be now oncliking a link, the loading.gif appears below the original largeimg, which remains there until the new one loads and replaces it! So, in other words, the hide() doesnt seem to be hiding it!

3

1/ initial load doesn’t display the loading.gif before displaying first image as page loads.

  • ok. then we will display the loading.gif image and hide the first image on load

that can be done with these codes;

  • load this up initially

$().loadImage($("#largeImg"));
  • show loading.gif image

<img src="loading.gif" id="loader_image" />
  • hiding the first image

<img src="http://www.rnel.net/images/tutorials/for_frame-16394.jpg" style="display:none;" alt="test1" id="largeImg" />

2/ the image space collapses to the size of the loading.gif, is there a way to keep the same image size as the largeImg, but have the loading.gif centered inisde?

  • yes. play with your css style until you achieved what you want - class=“thumbs” and/or other codes you have

Actually in relation to (3), i realised that in fact it’s not displaying the loading.gif until the new image loads, but rather using a timer? How can this be changed to firing on image load?

  • .load(). will fire these images onload - however I consider my opinion that your images are relatively small in file size hence loading.gif image will almost not show up anymore. It seems that you would like to show the loading.gif image every time the image loads up so I did it with setTimeout()

here’s how to fire them up on .load();


$("#largeImg").attr({ src: largePath, alt: largeAlt }).show();
$("#largeImg").load(function(){
	$("#loader_image").hide();
});

on the other hand, this is how to commence them on setTimeout


setTimeout(function(){
	$("#loader_image").hide();
	$("#largeImg").show();
	},1000
);

here is the full code - decide what fits in your requirements


$(document).ready(function(){
		$().loadImage($("#largeImg"));
	
		$(".thumbs a").click(function(){
			$().loadImage($(this));
			return false;
		});
	});
	
	jQuery.fn.extend({
		loadImage:function(myObject){
		var largePath = myObject.attr("href");
		var largeAlt = myObject.attr("title");
		
		$("#loader_image").show();
		$("#largeImg").hide().attr({ src: largePath, alt: largeAlt });
		
		$(".thumbs a").removeClass("viewing");
		myObject.addClass("viewing");
			
			setTimeout(function(){
				$("#loader_image").hide();
				$("#largeImg").show();
				},1000
			);
			
			/*
			$("#largeImg").attr({ src: largePath, alt: largeAlt }).show();
			$("#largeImg").load(function(){
				$("#loader_image").hide();
			});
			*/
			
		return false;
		}
	});



<div class="thumbs">
	<a href="http://www.rnel.net/images/tutorials/for_frame-16394.jpg" title="frame1" class="viewing">
		1
	</a>
	<a href="http://www.rnel.net/images/tutorials/for_broken_egg-16397.jpg" title="egg">
		2
	</a>
	<br />
	<img src="loading.gif" id="loader_image" />
	<img src="http://www.rnel.net/images/tutorials/for_frame-16394.jpg" style="display:none;" alt="test1" id="largeImg" />
</div>
4 

$(document).ready(function(){
	$(".thumbs a").click(function(){
		$().loadImage($(this));
		return false;
	});
	
	jQuery.fn.extend({
		loadImage:function(myObject){
		var largePath = myObject.attr("href");
		var largeAlt = myObject.attr("title");
		
		$("#loader_image").show();
		$("#largeImg").hide();
		
		$(".thumbs a").removeClass("viewing");
		myObject.addClass("viewing");
		
			setTimeout(function(){
				$("#loader_image").hide();
				$("#largeImg").attr({ src: largePath, alt: largeAlt }).show();
				},1000
			);
		}
	});
});



<div class="thumbs">
	<a href="http://www.rnel.net/images/tutorials/for_frame-16394.jpg" title="test1" class="viewing">
		1
	</a>
	<a href="http://www.rnel.net/images/tutorials/for_broken_egg-16397.jpg" title="test2">
		2
	</a>
	<br />
	<img src="loading.gif" style="display:none" id="loader_image" />
	<img src="http://www.rnel.net/images/tutorials/for_frame-16394.jpg" alt="test1" id="largeImg" />
</div>

I believed you are quite familiar with jQuery already and that you are just a bit confused on how to assemble them to meet your requirements so I didn’t explain the codes anymore. But let me know if any part is unclear to you.

5

hi thanks for the reply…

when the image loader is displayed all of the other images are hidden and when the image you want to load up appears, the image loader becomes hidden

6

Actually in relation to (3), i realised that in fact it’s not displaying the loading.gif until the new image loads, but rather using a timer? How can this be changed to firing on image load?

7

Thanks for the reply.

Couple of things:

1/ initial load doesn’t display the loading.gif before displaying first image as page loads.
2/ the image space collapses to the size of the loading.gif, is there a way to keep the same image size as the largeImg, but have the loading.gif centered inisde?
3/ on clicking a link, the loading.gif displays then re-shows the original image briefly before displaying the new one. How can this be corrected?

Many thanks

8

Hi

maybe you can check out how it’s done in the lightbox plugin

http://leandrovieira.com/projects/jquery/lightbox/

:slight_smile: