.load() not executed after page refresh

Question

I'm trying to retrieve image dimensions after the page is loaded and if the view port size is modified. I can retrieve image dimensions after page load with .load but once the view port is modified, I haven't figured out how to retrieve the new image sizes.

I have written a function that is executed when the document is ready:

$(document).ready(ViewPortUpdate);

When the viewport is modified, I'm calling the same function:

$(window).resize(ViewPortUpdate);

The function is perfectly executed in both cases except for load events that are only triggered when the document is complete and not anymore if the viewport is modified.

Example:

function ViewPortUpdate()
{
console.log('view port updated');
$(".myimage").load(function()
    {
      // Here I retrieve the final image size 
      console.log('image loaded');
    }
}

when the page is loaded, I see 'view port updated' and 'image loaded' in my console but if I resize the window, I only see 'view port updated'. I suppose that the .load only work once and changing the view port size has no effect.

I'm probably not using the right approach but I don't know how to solve this issue.

Any idea?

Thanks Laurent

Possible duplicate of [Detect image load](http://stackoverflow.com/questions/3537469/detect-image-load) — Dave, Feb 08 '16 at 21:02
That us correct. You assign the load event and once it is assigned it only triggers when the image loads but it was already loaded before you assigned it — mplungjan, Feb 08 '16 at 21:02
Thanks, that's what I thought but it there a way to retrieve image dimensions once the view port has been modified? Modifying the view port modifies responsive images so I need their new dimensions. — Laurent, Feb 08 '16 at 21:07

score 1 · Accepted Answer · answered Feb 08 '16 at 21:12

1

You can try this:

$(window).resize(function(){
   ViewPortUpdate();
   $('.myimage').trigger('load');
});

Important Note: I would recommend removing the part you get the image size from the load event and making it a separate function, instead of this.

answered Feb 08 '16 at 21:12

Arman Ozak

2,304
11
11

Hello Arman, I think you have found my solution, I have simply added the .trigger before the .load and it works perfectly but it looks like it's not the good thing to do (based on your note). How would you combined the trigger with the load? thanks! – Laurent Feb 08 '16 at 21:19
2

A load event, by definition, is supposed to be triggered only once. Browsers render pages based on these events and it isn't a good practice to trigger a load event manually for a second time (or more). It may or may not cause a problem, but as a principle, when there's another way, you shouldn't do that. In your case, there is another way. If all you need are current image dimensions based on viewport changes, you can build a function for that, put everything you use for getting the dimensions in it, and call that function within both `$(window).resize()` and `$('.myimage').load()` functions. – Arman Ozak Feb 08 '16 at 21:30
I have tried both, with the trigger it works fine. If I create a function that simply outputs image dimension into the console and call it with window.resize() I get different (and incorrect) values. It looks like resize is fired before the final dimension is known, the value I get with window.resize() is always lower than the one I get with trigger + load. – Laurent Feb 08 '16 at 21:55
1

The trigger worked better most probably because resize event is being fired continuously (during resize) and you only need it once (at the end of the resize). Have you tried using a timeout in your `$(window).resize()` function? Something like that: `var timer; $(window).resize(function(){ clearTimeout(timer); timer=setTimeout(getImageDimensions,100); });` maybe. – Arman Ozak Feb 08 '16 at 22:15
You are totally right, that what the problem. By using a time out and isolated the dimension detection in a function I can bypass the load and the trigger which is even better than what I initially wanted to achieve. Thanks! – Laurent Feb 09 '16 at 19:04
mmm sorry went to fast, I still need the .load but everything works fine! – Laurent Feb 09 '16 at 19:11

score 1 · Answer 2 · answered Feb 08 '16 at 21:16

1

Possible solution:

$(window).on("load resize", function() {
  // retrieve image size
});

Because $(window).on("load", someFunction) triggers after all DOM content, including images, is loaded.

However if the window is resized before it's fully loaded, it probably can't grab all image dimensions. In which case, maybe:

$(window).on("load", function() {
  viewPortUpdate();
  $(window).on("resize", viewPortUpdate);
});

function viewPortUpdate() {
  // get image sizes;
}

answered Feb 08 '16 at 21:16

Mission Mike

393
2
11

Hello Mike, would the .on("load resize") work with lazy loading? Images are loaded after the page is loaded, that's why I used the .load directly with the image. Thanks – Laurent Feb 08 '16 at 21:21
1

Ah, got it - Can't remember for sure, but I don't believe $(window).on("load") catches lazy-loaded images. It may in some cases if the lazy-load script is ran before the page is completely loaded (i.e., in an inline script before
), but not if the page is considered 100% loaded, then an image is loaded 1 second later.
– Mission Mike Feb 08 '16 at 21:24
1

This may help: http://www.experts-exchange.com/questions/28434237/JQuery-Javascript-Detect-IF-an-image-has-loaded-Else-use-another-image.html --maybe running a conditional like this within viewPortUpdate() like $(".myImage").each(function() { /* test if image loaded, if so grab dimensions */ }); – Mission Mike Feb 08 '16 at 21:27
Mike, tested it right away and I see that images are loaded after the window load so I won't be able to catch their dimensions with window load. :( – Laurent Feb 08 '16 at 21:28
See @ArmanOzak's comment re: "A load event, by definition..." -- that looks like the cleanest and leanest method. – Mission Mike Feb 08 '16 at 21:35

.load() not executed after page refresh

2 Answers2