SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to use animated gif while image is loading?

    I want to start using some animated gifs in my pages.. Is there a site I can download them from (simple ones)?

    Also, can someone explain to me how to do this? Not write the code for me.. but is it as simple as displaying the animated gif on screen and when an (large) image is finished preloading for example, swap the animated gif for the new image?

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    http://www.google.com/search?q=activity+gif

    just stick it on like you'd stick anything else on the page using js. hang on though, are you talking about ajax communications or normal communications. if normal, not sure how useful good it'd be, but still quite possible i suppose. on an appropraite event add the image. i've just done this for an ajax request on this page:
    http://vm.ooh.uk.com/howfar/testy.php
    valid postcode to be able to see the activity image: L11LL
    and also you get the activity image clicking the 'different postcode' link/button.

    basically you preload the image by having something like this in an on load handler (preloading the activity image allows it to appear immediately which is quite important for this because maybe the connections gone down since they loaded the page):
    Code:
    	activityImage=document.createElement('IMG');
    	activityImage.src="activity.gif";
    	activityImage.id="activity";
    (i have the activityImage variable as a global one)

    then in an event handler connected with any links/buttons you want to trigger the a.i. have something like (depending on the already existing html and where you want the image):
    Code:
    	var div=document.getElementById("in"); // in is the id of the div i'm putting the activity image into
    	div.appendChild(activityImage);
    and have some predone css to handle any style for the activity image, hence the activityImage.id="activity" line when first making the js image object.

    again i qeustion the need for this on a normal page request but maybe there is some value.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh i've just realised you want it on the page that's loading not the page that the initial link is on.

    > but is it as simple as displaying the animated gif on screen and when an (large) image is finished preloading for example, swap the animated gif for the new image?

    yes it can be exactly like that.

    to do what you're saying yes, swap images in the on load event handler for the image in qeustion. better why not have both image (your main one plus the activity one) on the page at the same time and get rid of the activity one on image load? seems non beneficial to me to get rid of the default image loading activity mechanim?; where users see the image progresively loading. it'd annoy me as a user if you got rid of that. it's half the reason i, as a web surfer/user, have js off because so often people's "help" is not helpful.
    Last edited by johnyboy; Sep 15, 2008 at 10:59.

  4. #4
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link and explanation, I'll have at it and possibly post more questions


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
  •