Question

I have the jQuery below http://jsfiddle.net/XMdYw/7/

var elements = '';
var ELEMENT_COUNT_PER_PAGE = 301;
var page = 1;

for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
    elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
}

$('.imagecontainer').append(elements).masonry();​

The issue with it is that the images are overlapping, after refreshing the page it fixes but once the site is completely realoded it has the issue yet again.

WORKS PARTIALLY

the reason i say it works partially is because there is no div.imgwrap wrap on the img

var elements = '';
var ELEMENT_COUNT_PER_PAGE = 301;
var page = 1;

for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
    elements+= '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'
}
var $img = $(elements);
$img.on('load', function() {
    $('.imagecontainer').masonry('reload');
});
$('.imagecontainer').append(elements).masonry();

I tried the below

    var elements = '';
    var ELEMENT_COUNT_PER_PAGE = 301;
    var page = 1;

    for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
        elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
if(i==301){
$('.imagecontainer').masonry('reload');​
}
    }

    $('.imagecontainer').append(elements).masonry();​

and i have also tried

    var elements = '';
    var ELEMENT_COUNT_PER_PAGE = 301;
    var page = 1;

    for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
        elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
    }
var $imgs = $(elements);

    $('.imagecontainer').append($imgs).masonry( 'appended', $imgs );

SO

is there maybe a way to catch when the append is complete and then apply .masonry(); with the img having the div wrap

furthermore

you’ll find a window.setTimeout is also the solution but someimtes the images havent loaded within 2 seconds and its not appealing looking at the overlapping images for long

Answer 1

1. I suggest you to add the height and witdh to the image and then append it with masonry.
2. After you append all images call masonry.reload() function.
3. When the images take too long to load use function imageloaded as described in the masonry documentation