jQuery function only applied after refresh

Question

I'm using $.getJSON(...) to load JSON data (images) to my HTML web page, the getJSON() function gets called when the DOM is ready:

$(document).ready(function() {

After that I use the montage.js script to order the image into a responsive grid. This function gets called when the full page is loaded and ready:

$(window).load(function() {...}

Still when I open the page the images do not get orderd, only when I refresh the page the montage.js script gets applied and the images become a grid.

getJSON:

$(document).ready(function() {
    $.getJSON( "images.json", function( data ) {
        $.each( data.images, function( key, val ) {
            //
        });    
    });
});

Answer 1

Try this:

$(document).ready(function() {
    $.getJSON( "images.json", function( data ) {
        $.each( data.images, function( key, val ) {
            //
        });    
    }).done(function(){

        $('image').montage(); //do something like this to call montage for your image
   });
});

Since success is deprecated for $.getJSON youll be using .done().