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.
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.
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.
I am banking on your last statement John. But I am still going to school as well :)