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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    129
    Thanks
    11
    Thanked 0 Times in 0 Posts

    why on earth wont this work

    i have a simple image swap code here

    Code:
    <SCRIPT language="JavaScript">
    function movepic(img_name,img_src) 
    {
    objImage = new Image();
    objImage.onLoad=imagesLoaded();
    objImage.src=img_src;
    function imagesLoaded()
     {    
    document[img_name].src=img_src;
     }
    }
    </SCRIPT>
    that code works lovely.
    now i want to display a loading.gif while its loading.
    here is my new code

    Code:
    <SCRIPT language="JavaScript">
    function movepic(img_name,img_src) 
    {
    document.getElementById("loading").style.display="block";	
    objImage = new Image();
    objImage.onLoad=imagesLoaded();
    objImage.src=img_src;
    
    function imagesLoaded()
     {    
    document[img_name].src=img_src;
    document.getElementById("loading").style.display="none";
     }
    }
    </SCRIPT>
    either it does not set the loading to visible or it does and then instantly makes it not visible but either way its not working.
    the code below works fine
    Code:
    document.getElementById("loading").style.display="block";
    so please tell me what i am doing wrong.

    the code gets executed from an onclick div inside a table td

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function movepic(img_name,img_src)
    {
    document.getElementById("loading").style.display="block";
    var objImage = new Image();
    objImage.onload=function(){ imagesLoaded(img_name,this.src); }
    objImage.src=img_src;
    
    function imagesLoaded(img_name,src)
     {
    document[img_name].src=src;
    document.getElementById("loading").style.display="none";
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <img id="loading" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    <img name="img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    <input type="button" name="" value="Test" onmouseup="movepic('img1','http://www.vicsjavascripts.org.uk/StdImages/Two.gif')"/>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    129
    Thanks
    11
    Thanked 0 Times in 0 Posts
    your like a program.
    you just fix the problem with no comments.
    thankyou works great


  •  

    Posting Permissions

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