JScript: How can I throw an error message when image is not loaded?

Question

I have a image loader function, that calls a function when all images are loaded, regardless how many I load. But currently it fails when a image src file name is not valid, because onload is not called.

How can I throw an error message, if an image is not loaded?

loadImage: function(image, id, fn) {

   var bgImg = new Image(),
   self = this;

   // counting images currently loaded
   this._loadingImages++;

   // set image source and onload callback 
   bgImg.src = image;   
   bgImg.onload = function() {
    fn(image, id);
    self._loadingImages--;
           if( self._loadingImages === 0 ) self.imagesLoaded(); 
   }
},

Answer 1

loadImage: function (image, id, fn) {

    var bgImg = new Image(),
        self = this;

    // counting images currently loaded
    this._loadingImages++;

    // set image source and onload callback 
    bgImg.src = image;
    bgImg.onerror = function () {
        // your error code
    }
    bgImg.onload = function () {
        fn(image, id);
        self._loadingImages--;
        if (self._loadingImages === 0) {
            self.imagesLoaded();
        }
    }
};

This should work.

Answer 2

This Thread can help you: Check if an image is loaded (no errors) in JavaScript

I guess with jQuery you can achieve this such the answer on the link that I've copied below:

$("<img/>")
    .load(function() { console.log("image loaded correctly"); })
    .error(function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

Answer 3

Thanks to t.niese, this is my solution:

loadImage: function(image, id, fn) {

   var bgImg = new Image(),
   self = this;

   // counting images currently loaded
   this._loadingImages++;

   // set error and onload callback and then image source
   bgImg.onerror = function() {
       throw new Error( "ERROR" );
   };
   bgImg.onload = function() {
       fn(image, id);
       self._loadingImages--;
       if( self._loadingImages === 0 ) self.imagesLoaded(); 
   }
   bgImg.src = image;   
},