CODEWITHSUNDEEP
javascriptjquery
Laurent
Laurent

Reputation: 1563

.load() not executed after page refresh

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

Upvotes: 0

Views: 133

Answers (2)

Mission Mike
Mission Mike

Reputation: 393

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

Upvotes: 1

Arman Ozak
Arman Ozak

Reputation: 2344

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.

Upvotes: 1

Related Questions