2

To make sure an image is load on our page and then proceed to the next state, we have used the onload method as mentioned here:

image = new Image();

image.onload = function(){
  // go to the next state
};

image.src = image_url;

The issue is the event is not triggered for images with size zero and as a result the page stays in the halt mode and does not progress to the next state.

What is the best way to handle the issue with onload function not being triggered for images with size zero?

Related questions:

1- new Image(), how to know if image 100% loaded or not?

Community
  • 1
  • 1
AmirHd
  • 10,308
  • 11
  • 41
  • 60
  • Just an idea...does `image.complete` boolean variable get updated to true? Then you could trigger the onload event immediately manually if after setting src such is true. – JCOC611 Jan 14 '16 at 00:36
  • I will check that and will get back to you @JCOC611 – AmirHd Jan 14 '16 at 00:38
  • 5
    What is an image of size zero? Are you saying that the file is 0 bytes? If so, it's not a valid image and that would be why onload isn't being called. – JLRishe Jan 14 '16 at 00:39
  • 1
    Try `onerror` for invalid images. – Barmar Jan 14 '16 at 00:43
  • 1
    @Barmar, but then how would he know if it's a "valid" error for a 0 size image, or an "invalid" error (timeout, otherwise broken "half" image, network problem, ...) – Gavriel Jan 14 '16 at 00:45
  • Not sure -- maybe the `event` argument to `onerror` includes details about the reason for the error. – Barmar Jan 14 '16 at 00:47
  • @JLRishe clearly that is the case. My question is mainly on how to handle this case as it stops our page from going to the next state because of this error. – AmirHd Jan 14 '16 at 01:34

3 Answers3

1

If you really want to do this with 0 size files, try to make it a script. 0 size script is valid. See:

Trying to fire the onload event on script tag

Or if you really have some real images, but some are "nothing", then use a 1x1 "clear_pixel.gif". You can also make it invisible with css (though then you won't see the real images either), maybe there's a way to detect from js in the onload what's the real size of the image.

Community
  • 1
  • 1
Gavriel
  • 18,880
  • 12
  • 68
  • 105
1

If you want your process to proceed when the image either finishes loading or fails to load, you can add your event handler to the .onerror event:

var image = new Image();

image.onload = image.onerror = function () { 
    // go to the next state
};

image.src = image_url;
JLRishe
  • 99,490
  • 19
  • 131
  • 169
0

Can you give the images a non-0 size and then use position:absolute to place them off the page where they are not visible? 

height:1px
width:1px
position:absolute
left:-1000000px

(I'm assuming here that they are actual images with non-zero size, but you made the img element have size 0 in order for the images not to be visible. I'm not exactly sure that's the case.)

user984003
  • 28,050
  • 64
  • 189
  • 285