[Webkit-unassigned] [Bug 9582] New: img.onload event ONLY fires when .src changes

Sun Jun 25 13:37:54 PDT 2006

http://bugzilla.opendarwin.org/show_bug.cgi?id=9582

           Summary: img.onload event ONLY fires when .src changes
           Product: WebKit
           Version: 417.x
          Platform: Macintosh
        OS/Version: Mac OS X 10.4
            Status: UNCONFIRMED
          Severity: normal
          Priority: P2
         Component: JavaScriptCore
        AssignedTo: webkit-unassigned at opendarwin.org
        ReportedBy: jschrab at malicstower.org

Consider the following example:

------------------------------------------
<!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>
        <script type="text/javascript">
        function dothis() {
                document.getElementById('demoImage').onload = function() {
alert('done'); }
                document.getElementById('demoImage').src =
"http://images.apple.com/main/elements/homeiconus.gif";

        }
        function dothat() {
                document.getElementById('demoImage').onload = function() {
alert('done'); }
                document.getElementById('demoImage').src =
"http://images.apple.com/main/elements/homeiconus.gif";
        }
        </script>
</head>

<body>
        <a href="#" onclick="dothis();">dothis</a> | <a href="#"
onclick="dothat();">dothat</a><br />
        <img src="http://images.apple.com/main/elements/homeiconus.gif"
id="demoImage" alt="" />
</body>
</html>
------------------------------------------

It would appear that onload events for img elements (possibly more) only will
fire when there is an actual change to the .src in the above example.  The
"alert()'s" in the onload functions never fire because the value of src
changes.  This is not how other major browsers (IE 6.0 and Firefox 1.5 tested)
behave - onload events always fire after they are complete, even if they don't
do a whole lot in the case of unchanged content.

There is a work around but it's not nice:

------------------------------------------
<!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>
        <script type="text/javascript">
        function dothis() {
                document.getElementById('demoImage').onload = function() {
alert('done'); }
                document.getElementById('demoImage').src =
"http://images.apple.com/main/elements/homeiconus.gif?random="+Math.random();

        }
        function dothat() {
                document.getElementById('demoImage').onload = function() {
alert('done'); }
                document.getElementById('demoImage').src =
"http://images.apple.com/main/elements/homeiconus.gif?random="+Math.random();
        }
        </script>
</head>

<body>
        <a href="#" onclick="dothis();">dothis</a> | <a href="#"
onclick="dothat();">dothat</a><br />
        <img src="http://images.apple.com/main/elements/homeiconus.gif"
id="demoImage" alt="" />
</body>
</html>
------------------------------------------

With differing URL's, the src is different so onload events will fire off.  But
this is a waste - the browser goes off the server for images that it really
doesn't need, just so events will fire off.

-- 
Configure bugmail: http://bugzilla.opendarwin.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.