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.

Comments

  1. CWSpear
    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. 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.

    • marinade
      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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.