In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads (which holds aspect ratio all by itself). Then apply a CSS class to make the "fade in" work (changing opacity from 0 to 1). Easy cheesy and just a dollop of JavaScript.

It should be noted that on the live version of the site unfortunately this cool technique wouldn't work. In order for it to be really effective, we need to know the aspect ratio of the image server-side, we can can create the grid instantly with the correct placeholders. Unfortunately we don't have that information available to us in the real gallery. We can use PHP to get the dimensions, but it's very slow. Instead, we wait for all the images to load and then fade in their opacity. Not quite as cool and a bit slower, but at least less loading janky-ness.


  1. User Avatar
    Permalink to comment#

    Cool solution. I probably would have waited for all images to load and just fade them all in, but this is a much cooler way of doing it.

  2. User Avatar
    John Lueders
    Permalink to comment#

    This video is powerful. The information about using your seamless responsive grid + tricking the images to maintain a future size and then jquerying the opacity to get the fade in effect. Loving the videos…I’m watching everyone all the way through. These videos are way better than a college education.

    • User Avatar
      Permalink to comment#

      I am banking on your last statement John. But I am still going to school as well :)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.