Masonry not displaying images correctly until several resizes [closed]

Question

I am using a combination of Skeleton and Masonry to build my portfolio site. When I load the portfolio initially, there is only 1 tiny image. When I resize the first time, it displays all columns but the images overlap. When i resize again, the height of most of the tiles are correct, but the longer tiles (JSTOR) are still cut off. On the third resize (and all subsequent visits) the tiles are displayed correctly.

((EDIT: on page refresh (not clicking link again, but browser refresh) the grid also goes wonky....sometimes shows all the columns but some images are stacked, and sometimes shows 1 tiny picture only.))

I don't have the most thorough understanding of JS or jQuery, so a lot of my attempts to fix may have been clumsy. My assumption at this point is that masonry is creating the grid before hte images are loaded...I have tried various code bits to fix this, including Desandro's own imageload snippet and other responses here on StackOverflow like this one.

Right now my site should be live at new.rdhalexander.com. I'm not sure what other information is needed....but I will keep a close eye on this.

Answer 1

UPDATE: Refer to @Stefan and his example. Apparently there is a new way.

Seems like the images haven't quite loaded before masonry decides to get their sizes.

You can Test with some simple css and you would probably see a delayed load,

.tile {
   position:relative !important;
}

and also try a long timeout something like

setTimeout(function(){
  .. masonry blah ..
},1000);

Then to solve the timing issue, this is what the author of masonry suggests.

$(window).load( function(){   $('#content').masonry(); });

link

Answer 2

if anyone gets here from google, nothing else has worked for me except forcing the resize event manually

window.dispatchEvent(new Event('resize'));