#051: Smooth Loading Gallery, Part 1

(Updated on )

We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take a moment to load and don’t have a width/height to use yet. So when they do pop in, the columns need to reorganize themselves.

I think we can prevent this wonkiness with some JavaScript though. Since we know the images height and width, we can create a box of the correct aspect ratio to put there as a placeholder. Then when the image is loaded, we’ll replace the placeholder with the image.

By the end of the video we’re on the right track, but it’s a little broken. Don’t worry, we’ll fix it up in the next video.