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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image OnLoad event not working as I expect

    I've been writing some code that uses html 5 canvas and it's required to cache images first, however something wasn't working right, so I cut it down to a test sample and it still doesn't work as I expect, here's the full web page test code;

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <script language="javascript">
    	var img=new Image();
    	img.onLoad = function() {alert("Loaded")};
            img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";
    </script>
    <body>
    <img src="http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF" />
    </body>
    </html>
    I expect the "alert" message to appear when the image has been loaded, but it never does. What stupid mistake am I making ? The image is included on the page just to ensure it's still there on the website in question.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    The JS is executed between the </head> and <body> tags. What happens if you move the script to within the <body></body> tags?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Done the change as follows:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <script language="javascript">
    	var img=new Image();
    	img.onLoad = function() {alert("Loaded")};
        img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";
    </script>
    <img src="http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF" />
    </body>
    </html>
    Unfortunately no difference.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 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"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript">        
    function newSource() {
    alert("Loaded");  
    img = document.getElementById("newImage");
    img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF"; 
    }
    </script> 
    <title>Untitled Document</title> 
    </head> 
    <body> 
    <img id="newImage" onload="newSource()" /> 
    
    </body> 
    </html>
    Untested.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. Two things, that won't work as the onload set in the image tag will never fire as there is no "src" in the tag and you only load the src attribute when the onload fires, so kind of a catch-22.

    But I see you were trying to work with the image on the document as a solution. I should point out that that it is there just for reference. My actual full code does not use any image tags, all images are loaded programmatically in a very similar way to the example where I set the onload function programatically and then set the src property, like this;

    Code:
        var img=new Image();
        img.onLoad = function() {alert("Loaded")};
        img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";
    The image on the page is just so people can see that the actual src link is valid. In my full project I'm actually loading many graphics for rendering on a HTML 5 canvas object. By caching them to memory I can plot them on the canvas in any way I please, just as you would do when coding for a game. But I must ensure that all images are loaded correctly before trying to plot them to canvas, hence the code to detect when an image has been loaded.

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I've solved this, this code works

    Code:
        var img=new Image();
        img.setAttribute("onload","alert('Loaded')");
        img.src =  "http://cti.itc.virginia.edu/~bcr/Labs/Kota_Reliquary.GIF";
    The only difference is the img.setAttribute("onload","alert('Loaded')"); line. The thing is I've seen my original example code recommended on many many sites but I just couldn't get it to work properly on the two browsers I tried which were Google Chrome and IE 9. I'm happy it works now but still a bit puzzled.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Maybe if the image is already in the browser's cache it doesn't trigger the onload event(?).

    Try clearing the cache or use a different image temporarily.

    Added: JavaScript is case-sensitive:

    Code:
    img.onload = function() {alert("Loaded")};
    Last edited by AndrewGSW; 08-03-2012 at 08:55 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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