0

After a button click, an image is started being loaded. What I want: when the image is fully loaded, a function is being called.

I know this question has been asked before, but every answer suggests to use the onload event, which isn't entirely correct. According to the W3C spec, onload is not a valid event for IMG elements. It wouldn't bother me very much if not for the fact that in some cases the event isn't fired.

Everything works fine except if the image weights much and the loading process takes some time (for example 20s). I guess the onload event may have some maximum waiting time set. Example code with a heavy image (tested on Chrome, you have to clear the cache to test it again, and, if you have some super fast net, you may need to test it with even bigger image):

$(new Image()).attr('onload', 'worksFunc()').attr('src', "http://wallpaperus.org/wallpapers/04/151/outer-space1-1472x6429-wallpaper-1634552.jpg").appendTo($('body'));

The solution may be in jQuery, but not necessarily.

Lincoln
  • 1
  • 1
  • 2
    Your code is invalid, you close and re-open the quote in the string. `"function(){ console.log("works!"); }"`. Also, why are you using onload as an attribute? You could do `.on('load', function(){ console.log("works!"); })`. – Alexander O'Mara Dec 07 '14 at 04:56
  • Also, if you could cite where the W3C spec says `onload` is not valid for `img` elements, that would be helpful. I've never had a problem using the event on an image so long as I add the listener before setting the `src` attribute (and even then that issue was only in old versions of IE). – Alexander O'Mara Dec 07 '14 at 05:00
  • Corrected the quotes, as for the rest, it doesn't matter, it is an example, I don't use this code. – Lincoln Dec 07 '14 at 05:00
  • @AlexanderO'Mara I read it here (first comment): http://stackoverflow.com/questions/280049/javascript-callback-for-knowing-when-an-image-is-loaded. And, as my tests show, it is true. – Lincoln Dec 07 '14 at 05:10
  • I'm unable to reproduce your issue using `$(new Image()).attr('onload', 'alert("works")').attr('src', "http://wallpaperus.org/wallpapers/04/151/outer-space1-1472x6429-wallpaper-1634552.jpg").appendTo($('body'));`. I forced the image to take longer the 20 seconds to download by interrupting the internet connection. – Alexander O'Mara Dec 07 '14 at 05:54
  • @AlexanderO'Mara Same code doesn't fire the event for me (heavy images). Tested on Chrome? – Lincoln Dec 07 '14 at 06:00
  • Does the image finish downloading? Maybe your connection is being interrupted. – Alexander O'Mara Dec 07 '14 at 06:00
  • Yes it does, for sure. How about this image: http://www.ifreewallpapers.com/wp-content/uploads/2013/09/Free-wallpapers-download-ultra-high-resolution-finding-nemo-bruce-the-shark-13000x6096.jpg – Lincoln Dec 07 '14 at 06:07
  • Yep, even after 30 seconds. – Alexander O'Mara Dec 07 '14 at 06:10

1 Answers1

0

event works when element have attached with document, so you will need to append <img/> element in document then try operation, see sample code

var img = new Image();
img.src = "http://hdwallpapers.us/wp-content/uploads/walls/thumbs/The-Treetop-Temple-Protects-Kyoto-Japan-1024x640.jpg";
img.style.display = "none";
img.onload = function(){
  alert("Image Loaded");
    this.style.display = "block";
}
document.body.appendChild(img);

your code have syntax errors

  1. (") quote syntax error, and you can escape quote in inline event code so always use opposite quote ", '
  2. you have added anonymous function, but anywhere haven't call

jQuery code

$(new Image()).attr('onload', 
     'var func = function(){ console.log("works!"); }; func.call(this);')
.attr('src', "http://hdwallpapers.us/wp-content/uploads/walls/thumbs /The-Treetop-Temple-Protects-Kyoto-Japan-1024x640.jpg")
.appendTo($('body'));
Girish
  • 11,907
  • 3
  • 34
  • 51
  • yes but your process wrong.. see your code issue in answer – Girish Dec 07 '14 at 05:11
  • Again, your code doesn't change anything, the quotes were corrected 12 minutes ago. Read my question again please. – Lincoln Dec 07 '14 at 05:13
  • ok good, but anonymous function `function(){ console.log("works!"); }` won't work, it can work as callback function otherwise you will need to add function name and call – Girish Dec 07 '14 at 05:18
  • your code work when you will call function, see demo link http://jsfiddle.net/zugyw8wy/1/ – Girish Dec 07 '14 at 05:22
  • I changed the code. Hope we can now focus on the issue - the code works, the only problem is that the `onload` event isn't fired when the image is heavy. – Lincoln Dec 07 '14 at 05:25
  • `onload` event works, you have added invalid image url, that is redirect on page – Girish Dec 07 '14 at 05:27
  • Try using JQuery with load event: `$(img).load(function () { console.log("image loaded"); });` – Carlos Huchim Dec 07 '14 at 05:36
  • @Girish Let's make it clear and final. I didn't test it with this image. This is an image I found in google when I was making this topic. If it doesn't work for you, find another heavy image (~10MB) and test it yourself (be sure to clear the cache). Again, everything works, even a heavy image is being correctly loaded, just the `onload` and ONLY for heavy images is the issue. If you could please delete your answer, I'd be thankful, as it doesn't add anything but confusion. – Lincoln Dec 07 '14 at 05:49
  • 1
    Answers are a try to help you. In some cases events is not fired because the image are in the browser cache yet... Have a nice search of your problem :D – Carlos Huchim Dec 07 '14 at 05:54
  • ok, as you say `onload` event is not working with heavy images, then did you see `onerror` event.. with same images???? if both events are not working to you then close question – Girish Dec 07 '14 at 05:58