Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Some Help

  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Some Help

    Ok, I know nothing about javascript and I only need one script/code done for me. I'm trying to get a script that'll replace an image's src with a "loading" image while the actual image is loading. My site is http://vinthian.axemwarclan.net/images/

    The reason I need this is because some images are very big and take a while to load, so while it's loading, the "Hover to View" would be replaced with, http://vinthian.axemwarclan.net/images/loading.gif and when the browser is done loading the image, it'll show the main image. Once it's done loading, it stays that way until u refresh, it doesn't disappear.

    If anyone can offer me some help, it'd be appreciated.
    (vinthian at gmail dot com)

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why is the picture only shown after a hover-out (after a onhover)?
    Last edited by tonyp12; 02-07-2007 at 05:45 AM.

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it's to save bandwidth. the image doesn't load until u hover over it, and doesn't show until it's done loading. i want it to be replaced with the loading image while it's loading.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Vinthian View Post
    and doesn't show until it's done loading.
    But it does not show it when it's done loading,
    it shows it after it's done loading AND after hover-out.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    noo, i mean i want the loading image to be shown before it's done loading, and the main image to be shown after it's done loading.



    Hover Image > Mouse Over > Loading Image > Done Loading > Main Image

    sry for the confusion :S

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not even talking about that step yet.

    First you have to fix the that image is shown as soon it's done loading and NOT after it's done loading and hover-out.

    test it , put you mouse on top of the box and don't move it.
    The picture will not even come up after 1 minute.

  • #7
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm, looks like i replaced over with out yesterday, it's fixed now... now how would i go about doing what i was trying to explain?

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,860
    Thanks
    22
    Thanked 157 Times in 148 Posts
    First of all, with all of the mouseover images on your page, I would preload all of those images so they would take less time to load on mouseover...try using something like this in your script to preload images:

    Code:
    if (document.images)
    {
        var preload_image_object = new Image();
        var URL_prefix = 'http://www.yourSite.com/images/';
    
        // set image url
        var image_url = new Array();
        image_url[0] = URL_prefix+"image1.gif";
        image_url[1] = URL_prefix+"image2.png";
        image_url[2] = URL_prefix+"image3.png";
    
        for(i=0; i<image_url.length; i++)
        {
             preload_image_object.src = image_url[i];
        }
    }
    Now, as far as replacing the original image with a loading image while the new image loads, give this a try:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title>Nav Menu</title>
    
    <style type="text/css">
    <!--
    
    .img_div
    {
        position:absolute;
        width:800px;
        left:50%;
        margin:0 0 0 -400px;
        text-align:center;
    }
    
    .image
    {
        border:5px double #eee;
    }
    
    .loading
    {
        position:absolute;
        width:64px;
        left:52%;
        margin:0 0 0 -32px;
    }
    
    -->
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <div class="img_div" id="img1" style="display:block;top:50px">
        <img class="image" onload="hideWorkingGIF('img1','deathscythe.png');" onmouseover="changeImg('img1',this,'deathscythe.png');"  src="http://vinthian.axemwarclan.net/images/default.png" />
    </div>
    
    <div class="img_div" id="img2" style="display:block;top:250px">
        <img class="image" onload="hideWorkingGIF('img2','scorpionvsspiderman.png');" onmouseover="changeImg('img2',this,'scorpionvsspiderman.png');"  src="http://vinthian.axemwarclan.net/images/default.png" />
    </div>
    
    <div class="img_div" id="img3" style="display:block;top:450px">
        <img class="image" onload="hideWorkingGIF('img3','gambit.png');" onmouseover="changeImg('img3',this,'gambit.png');"  src="http://vinthian.axemwarclan.net/images/default.png" />
    </div>
    
    <script type="text/javascript">
    <!--
    
    var dir = "http://vinthian.axemwarclan.net/images/";
    
    function changeImg(imgDivID,imageObj,imgName)
    {
        imgDivObj = document.getElementById(imgDivID);
    
        if (!document.getElementById("loading_" + imgName))
        {
            var workingBox = document.createElement("div");
            var animatedGif = document.createElement("img");
            animatedGif.src = dir + "loading.gif";
    
            workingBox.appendChild(animatedGif);
            workingBox.id = "loading_" + imgName;
    
            document.getElementsByTagName('body')[0].appendChild(workingBox);
            document.getElementById("loading_" + imgName).className = "loading";
    
            document.getElementById("loading_" + imgName).style.top = imgDivObj.offsetTop + 25 + "px";
        }
    
        if (imageObj.src != dir + imgName)
        {
            imgDivObj.style.display = "none";
            imageObj.src = dir + imgName;
        }
    }
    
    function hideWorkingGIF(imgDivID,imgName)
    {
        if (document.getElementById("loading_" + imgName))
            document.getElementById("loading_" + imgName).style.display = "none";
        document.getElementById(imgDivID).style.display = "";
    }
    
    -->
    </script>
    
    </body>
    
    </html>
    Last edited by chump2877; 02-07-2007 at 11:09 PM. Reason: fixed a few small bugs
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


  •  

    Posting Permissions

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