1

I'm trying to detect when an image is loaded using events (instead of using intervals to check the complete property). I have the following code in place but for some reason this does not fire. I've done the some with the onerror and onabort events as well, just in case if the image fails to load.

Now, if I attach a callback to the image load then the callback is executed, withing printing "Image Loaded" from the prototype's onload. It's almost like the new overridden onload is not called at all. I've made sure this is the first thing in the head script tag.

Image.prototype.coreOnload = Image.prototype.onload;
Image.prototype.onload = function() {
   console.log('Image Loaded ' + this.src);
   if( this.coreOnload ) {
      this.coreOnload();
    }
};

Oh I'm testing this is chrome!

Any pointers?

EDIT1: Adding my entire html

When I load this page, "Loaded from callback" is logged but not "Image Loaded". I would expect to see both.

<html>
    <head>
        <script type="text/javascript" >

            Image.prototype.coreOnload = Image.prototype.onload;
            Image.prototype.onload = function() {
                console.log('Image Loaded ' + this.src);
                if( this.coreOnload ) {
                    this.coreOnload();
                }
            };
            Image.prototype.coreOnerror = Image.prototype.onerror;
            Image.prototype.onerror = function() {
                console.log('Image Loaded Error ' + this.src);
                if( this.coreOnerror ) {
                    this.coreOnerror();
                }
            };
            Image.prototype.coreOnabort  = Image.prototype.onabort;
            Image.prototype.onabort = function() {
                console.log('Image Loaded Error ' + this.src);
                if( this.coreOnabort ) {
                    this.coreOnabort();
                }

            };
        </script>
        <style>
            .newStyle {
                font-size: 14pt;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    </head>
    <body >

        <script type="text/javascript">
        var img = new Image();
        img.onload = function(){
            console.log("Loaded from callback")
        };
        img.src = "http://i2.cdn.turner.com/cnn/dam/assets/121204012423-obama-boehner-t1-only-t1-main.jpg";

        </script>

        <a href="http://www.news.com">An external link</a>
    </body>

</html>

EDIT: corrected typo in log message.

webber
  • 1,834
  • 5
  • 24
  • 56
  • 1
    "Now, if I attach a callback to the image load then the callback is executed" ... can you include that part of the code? I'd guess that you've shadowed the `onload` property in the prototype by attaching an `onload` to the Image object. – Dagg Nabbit Dec 06 '12 at 22:33
  • You've got a typo - `When I load this page, "Loaded from callback" is logged but not "Loaded from callback".` - that's kind of a confusing statement – Jeff Dec 06 '12 at 22:55
  • As @GGG noticed you have shadowed prototype onload by setting onload property to instance. You have to somehow call prototype function explicitly: `img.onload = function(){ this.constructor.prototype.onload.apply(this, arguments); console.log("Loaded from callback") };` – Yury Tarabanko Dec 06 '12 at 23:04
  • Thanks Yury. Is it possible to override/shadow the onload property in the image prototype? The code u suggested would be difficult to implement as I'm referencing external js libraries. – webber Dec 06 '12 at 23:38
  • onload event doesn't mean that image is loaded. It means that some part of image data is coming. – el Dude Dec 06 '12 at 23:45
  • 2
    http://stackoverflow.com/questions/5292819/detect-image-load-by-jquery why you just dont make a callback on the onload?, what's the point of doing this? – ncubica Dec 07 '12 at 00:28
  • Because I need to detect image loads from external js libraries as well. I cannot mandate the other libraries to use jquery, do I've got to override the image object itself. – webber Dec 07 '12 at 03:32

0 Answers0