image onload event and browser cache

Question

I want to create an alert box after an image is loaded  but if the image is saved in the browser cache  the  onload event will not be fired   How do I trigger an alert when an image has been loaded regardless of whether the image has been cached or not   var img   new Image    img src    img jpg   img onload   function         alert  image is loaded

User · Answer

I found that you can just do this in Chrome:

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

Setting the .src to itself will trigger the onload event.

User · Answer

If the src is already set then the event is firing in the cached case before you even get the event handler bound  So  you should trigger the event based off  complete also   code sample      img   one  load   function          do stuff    each function        if this complete      for IE 10-     this  height    gt  0         this  load

User · Answer

I have met the same issue today  After trying various method  I realize that just put the code of sizing inside   window  load function       instead of document ready would solve part of issue  if you are not ajaxing the page

User · Answer

As you re generating the image dynamically  set the onload property before the src   var img   new Image    img onload   function         alert  image is loaded      img src    img jpg     Fiddle - tested on latest Firefox and Chrome releases   You can also use the answer in this post  which I adapted for a single dynamically generated image   var img   new Image        load  event   img  on  load   function       alert  image is loaded        img src    img jpg     Fiddle

User · Answer

There are two possible solutions for these kind of situations    Use the solution suggested on this post Add a unique suffix to the image src to force browser downloading it again  like this   var img   new Image    img src    img jpg      new Date   getTime     img onload   function          alert  image is loaded         In this code every time adding current timestamp to the end of the image URL you make it unique and browser will download the image again

[javascript] image.onload event and browser cache

Examples related to javascript

Examples related to image-loading