Databases
StackOverflow2013
Postsdbo
POMasonry not displaying images correctly until several resizes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMasonry not displaying images correctly until several resizes
    text
    copied!<p>This is my first question on StackOverflow, so please excuse any faux-pas I may make.</p> <p>I have spent a few days trying to fix this problem on my own, to no avail. I have tried several snippets of code found on both stackoverflow and other places in order to try and fix the issue.</p> <p>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.</p> <p>((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.))</p> <p>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 <a href="https://stackoverflow.com/questions/7476649/jquery-masonry-breaksstacks-images-in-chrome-safari-but-only-on-first-load">this one</a>.</p> <p>Right now my site should be live at <a href="http://www.new.rdhalexander.com/" rel="nofollow noreferrer">new.rdhalexander.com</a>. I'm not sure what other information is needed....but I will keep a close eye on this.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload