SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    "Loading" image is downloaded for each click

    I was trying to create an enable/disable button that works with AJAX.

    So, when a user clicks the image link, it is automatically replaced with a validating.gif image. That image is shown until the $.post() request is completed.

    But...the image isn't cached...it's re-downloaded every time for each link.

    The image src is loaded as:
    validating.gif?id=1
    validating.gif?id=2
    validating.gif?id=3
    etc.

    instead of just:
    validating.gif

    I did this is because whenever a new img src was changed to "validating.gif", any existing img src's that were set to "validating.gif" would reload/restart the animation when the change occurred.

    Is there a way to fix this so that the animation remains uninterrupted and that the validating.gif image isn't re-downloaded for each link?

    Code here:
    http://forceflow.50webs.com/loading_...ading_test.htm


    Thanks
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try loading the image into an image object and then replacing your images with clones of that image. They'll probably all be synchronized, but shouldn't reload/restart.
    Code:
    <body>
    <p id="im1"><img src="testing/chip1.jpg" /></p>
    <p id="im2"><img src="testing/chip2.jpg" /></p>
    
    <a href="#" id="l1">One</a> | <a href="#" id="l2">Two</a>
    
    <script>
    	var im = new Image();
    	im.src = "testing/validating.gif";
    	
    	$("#l1").click(function(){
    		$("#im1").empty().append($(im).clone());
    	});
    	
    	$("#l2").click(function(){
    		$("#im2").empty().append($(im).clone());
    	});
    </script>
    </body>

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Yep, the images don't redownload/reload/restart. And yes, they're synchronized.

    Thanks
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


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
  •