SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with this jquery image loading

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

    Code:
    <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. #2
    SitePoint Zealot
    Join Date
    Jul 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    $(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
    			);
    		}
    	});
    });

    HTML Code:
    <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.

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Hi

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

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


  6. #6
    SitePoint Zealot
    Join Date
    Jul 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code JavaScript:
    $().loadImage($("#largeImg"));

    - show loading.gif image
    Code JavaScript:
    <img src="loading.gif" id="loader_image" />

    - hiding the first image
    Code JavaScript:
    <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();
    Code JavaScript:
    $("#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
    Code JavaScript:
    setTimeout(function(){
    	$("#loader_image").hide();
    	$("#largeImg").show();
    	},1000
    );

    here is the full code - decide what fits in your requirements
    Code JavaScript:
    $(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;
    		}
    	});

    Code HTML4Strict:
    <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>

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once again for your time :-)
    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!

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •