jquery .load() doesn't work after hard refresh

Question

I have some code that when the page loads gets the height of an image and then resizes its container div accordingly. This works fine unless its the first time the page has

Answer 1

You could use some jQuery plugin like this one https://gist.github.com/797120/b7359a8ba0ab5be298875215d07819fe61f87399

Answer 2

If your images do not have width/height specified in HTML or CSS, then their width/height is not known until after the images have been downloaded.

$(document).ready fires when the DOM has been loaded, but potentially before auxiliary media such as images have been downloaded. That means you have a width/height, potentially, of 0 when your browser is re-downloading the images.

Maybe you can use something like this. The "imagesLoaded" plugin in particular looks useful (though its code implies that $(imgs).load should have worked for you >.<).

Answer 3

You might want to try this instead:

$(document).ready(function(){
//code here
});

Answer 4

Try calling your code in $(window).load. This will run after all images have loaded.

$(window).load(function () {
   // run code
});

Or you could try the imgload plugin.

Answer 5

I had this same problem as well. After some researching it seems that the browser needs to have a predefined value for the image in order to reset the size. So on the initial load, it messes up, but on reload the height of the image is retained, so then the javascript works correctly. You need to code in the initial height of your images so that the JS can resize them properly.