Javascript not applying first, only by refreshing page

Question

I have made an image gallery, in which i have portrait as well as landscape pictures. I use Javascript to determine which mode the picture is, to apply css based on the pictures orientation. This is the Code:

     $(document).onload(function() {   
$('.gallery').find('img').each(function(i,elem){
var $this = $(this),
    ratio = $this.width() / $this.height();

$this.addClass((ratio < 1) ? 'portrait' : 'landscape');
});
});

It does not work, when visiting the webiste first, altough it works flawlessly as soon as I refresh the page once. Open the website in new tab and its again not working.

PS. Tried to change document.onload to document.ready, didnt change anything.

Answer 1

Listen to the window loaded event this way (it would fire after images are loaded):

$(window).on('load', function(e) {
    $('.gallery').find('img').each(function(i,elem){
        var $this = $(this),
        ratio = $this.width() / $this.height();
        $this.addClass((ratio < 1) ? 'portrait' : 'landscape');
    });
});

Only after images were loaded you can check their ratio.

Answer 2

Use:

$(document).ready(init);

function init(){
// Enter your code here
}