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(); 
   }
},

[`.error()`](http://api.jquery.com/error/) is this you want? — Jai, Jan 10 '14 at 13:02
Check the answer of this question [image.onError event never fires, but image isn't valid data - need a work around](http://stackoverflow.com/a/9809055/1960455) — t.niese, Jan 10 '14 at 13:03
Look at [error MDN](https://developer.mozilla.org/en/docs/DOM/DOM_event_reference/error) & [onerror MDN](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onerror) — Givi, Jan 10 '14 at 13:03

deW1 · Accepted Answer · 2014-01-10T13:45:29.233

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.

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

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"))
;

edited May 23 '17 at 11:57

Community

1
1

answered Jan 10 '14 at 13:04

felipekm

2,820
5
32
42

I can't use a jQuery object there. – Michael Jan 10 '14 at 13:42

score 0 · Answer 3 · answered Jan 10 '14 at 13:49

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;   
},

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

3 Answers3