SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Very Simple Javascript Loading Image

    Hello. I am reposting this issues because the results I have been getting are still varied. I am no JavaScript expert but I put together this code to temporarily load an animated GIF while a new JPG Photograph is loading.



    Code:
    function imageSwap(TRGT, DIR){
    	document.getElementById('largeImage').src="portfolio/images/loader.gif";
    
    var nImage =new Image();
    
    nImage.src = "portfolio/" + DIR + "/" + TRGT + ".jpg";
    
    	nImage.onload = goSwap(TRGT, DIR);
    	}
    
    function goSwap(TRGT, DIR) {
    
    document.getElementById('largeImage').src="portfolio/" + DIR + "/" + TRGT + ".jpg";
    
    document.getElementById("nodetail").innerHTML = this["no" + TRGT];
    document.getElementById("chdetail").innerHTML = this["ch" + TRGT];
    
    	}

    As of right now this is working really well in Safari 3.1.2 but not in Firefox or Explorer.

    Any ideas on why this might be happening?
    Thanks in advance.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by livelearncreate View Post
    [CODE]function imageSwap(TRGT, DIR){
    document.getElementById('largeImage').src="portfolio/images/loader.gif";

    var nImage =new Image();

    nImage.src = "portfolio/" + DIR + "/" + TRGT + ".jpg";

    nImage.onload = goSwap(TRGT, DIR);
    }
    The onload handler must be installed before applying the src.
    Tab-indentation is a crime against humanity.

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

    Cool

    Quote Originally Posted by Logic Ali View Post
    The onload handler must be installed before applying the src.

    Like this?

    Code:
    function imageSwap(TRGT, DIR){
    
    	document.getElementById('largeImage').src="portfolio/images/loader.gif";
    
    		
    
    	var nImage =new Image();
    
    	nImage.onload = goSwap(TRGT, DIR);
    
    	nImage.src = "portfolio/" + DIR + "/" + TRGT + ".jpg";
    
    	
    
    	}
    
    
    
    
    
    function goSwap(TRGT, DIR) {
    
    	document.getElementById('largeImage').src="portfolio/" + DIR + "/" + TRGT + ".jpg";
    
    	document.getElementById("nodetail").innerHTML = this["no" + TRGT];
    
    	document.getElementById("chdetail").innerHTML = this["ch" + TRGT];
    
    	}
    This doesn't seem to fix the problem.
    Still only working in Safari.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by livelearncreate View Post
    Like this?
    Code:
    function imageSwap(TRGT, DIR){
    
    	document.getElementById('largeImage').src="portfolio/images/loader.gif";
    		
    
    	var nImage =new Image();
    
    	nImage.onload = goSwap(TRGT, DIR);
    
    	nImage.src = "portfolio/" + DIR + "/" + TRGT + ".jpg";
    Yes. It's hard to be certain without a live link but I think I can see what's happening. The 'loading' image is probably cached and loading immediately, but is being instantly dismissed by the request to load the main image into the same placeholder. I suggest that you preload the main image in the same way and use its onload handler to display it.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apparently I can't put links in my messages yet, as I am new to this forum. Seems counter productive. If you want to see this you can try ianwhitmore [dot] com.

    I'm not sure I follow what you are suggesting entirely or why Safari executes it correctly.Thanks for you help, any alteration to my code that you can show me?

  6. #6
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hard-wire the "loading" GIF into your HTML tag. The onload event won't fire until the "loading" image loads.

    Code:
    <img id="largeImage" src="loading.gif" alt="" />
    Here's another twist on what you're trying to accomplish. It will pollute the Image.prototype namespace horribly, but it might be interesting to try.

    Code:
    Image.prototype.target = new String();
    Image.prototype.directory = new String();
    Image.prototype.swap = function() {
    document.getElementById('largeImage').src =  "portfolio/" + this.directory + "/" + this.target + ".jpg";
    }
    
    nImage = new Image();
    nImage.target = "foo";
    nImage.directory = "bar";
    document.getElementById('largeImage').onload = function() {
    nImage.swap();
    }

  7. #7
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <img class="thumb" src="portfolio/nowhere/5t.jpg" alt="clear" onclick="imageSwap(5,'nowhere')" />


    This is the code that is calling my initial function.

    <div id="result"><img id="largeImage" src="portfolio/nowhere/1.jpg" alt="" /></div>

    This is the DIV and image that it is affecting.

    This starts with a Photograph loaded. When each thumbnail is clicked I want the animated GIF to load and spin until the new JPG is loaded and then swapped in.

    Not sure I want to go the prototype route right now.
    Still looking for a reason why Firefox and Explorer won't show me the loading GIF.

  8. #8
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The images are already in your browser cache by now. There is not enough time to display the rotating GIF before the onload event fires and displays the JPEG. Trying clearing your cache each time you edit the code and refresh the page.

  9. #9
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks WWW, I do clear the cache when I am testing. Same result, there is just a typical lag and then the new image appears. I'm using Firefox 2 still. Are you seeing the loading the GIF on your end?

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by livelearncreate View Post
    Apparently I can't put links in my messages yet, as I am new to this forum. Seems counter productive. If you want to see this you can try ianwhitmore [dot] com.

    I'm not sure I follow what you are suggesting entirely or why Safari executes it correctly.Thanks for you help, any alteration to my code that you can show me?
    I think Safari reacts differently when a replacement image isn't immediately available.
    nImage.onload = goSwap(TRGT, DIR);
    I should have mentioned that this is an error in that it executes immediately, it should be:
    Code:
    nImage.onload = function(){goSwap(TRGT, DIR);}
    If that doesn't work, this is what I would try although it's totally untested. You just call goSwap directly.

    Code:
    <script type='text/javascript'>
    
    new Image().src = "portfolio/images/loader.gif";  
    
    function goSwap(TRGT, DIR) 
    {
     document.getElementById('largeImage').src = "portfolio/images/loader.gif";  
     
     var nImage = new Image();
     
     nImage.onload = function()
     {   
      document.getElementById('largeImage').src =  nImage.src;
    
      document.getElementById("nodetail").innerHTML = this["no" + TRGT];
      document.getElementById("chdetail").innerHTML = this["ch" + TRGT];
     }
     
     nImage.src = "portfolio/" + DIR + "/" + TRGT + ".jpg";
    }  
    
    </script>
    Tab-indentation is a crime against humanity.

  11. #11
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nImage.onload = function(){goSwap(TRGT, DIR);}

    This worked great. Brilliant!!!
    Thanks so much. Now working in Safari, Explorer (Win) and Firefox (Min/Mac).

    Thanks so much for your help!


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
  •