Thread: Animated Image

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    52
    Rep Power
    9

    Animated Image


    When the user does the search and waits for the result, an animated image such as an hourglass will appear on the middle of the screen so that the user will know the process is still going on.

    I went to this site:http://loadinggif.com/ and downloaded #3, and saved it to my server's WebContent/images directory. I gave it a name: dial.gif.

    Next I tried to used it in a popup <div> (z-index based).

    The original codes:


    var processing = '<div class="process"><br>'
    content += '<embed src="/flash/loading.swf" quality="autolow" '

    if(modal.browserWindow.os != 'mac') {
    content += ' wmode="transparent"';
    } else {
    content += ' wmode="window"';
    }

    content += ' pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="60" height="60"></embed>' + '</div>';


    Now, I tried to use the download image, dial.gif to replace the swf file, something like:

    content += '<div ><img src="/imgs/dial.gif" /></div';


    How can I do it?
    Last edited by otnj2ee; October 25th, 2012 at 11:52 AM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,040
    Rep Power
    119
    You could do something like this:

    Code:
    <script>
    
    function hideLoadIcon(getID)
    {
    document.getElementById(getID).style.display="none";
    }
    
    function readyLoad()
    {
    var processing = document.createElement("div");
    var loadingIMG = document.createElement("img");
    processing.setAttribute("id","processor");
    processing.setAttribute("class","process");
    loadingIMG.setAttribute("src","/imgs/dial.gif");
    document.getElementsByTagName("body")[0].appendChild(processing);
    document.getElementById("processor").appendChild(loadingIMG);
    }
    
    document.onreadystatechange = function() {
    if (document.readyState=="interactive") {
     new readyLoad();
    }
    }
    
    window.onload = function() {
     new hideLoadIcon('processor');
    }
    
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo