#93: An Attempt at Smooth Loading Gallery Pages

(Updated on )

We spent all this time in our static mockup making some clever JavaScript that would “smooth load” the images in the Gallery. Now that we have the real Gallery going with real images, that is gone.

Essentially, we need to get our image wrappers having a padding-top of the aspect ratio of the image. That was easy in the static mockup because we knew the height and width of the image. We don’t have that information anymore, we just have the URL of the image.

We Google a tutorial on getting image dimensions with PHP. After we get this in place and visit the gallery, it loads super slowly. It’s probably the PHP function getimagesize. We speculate that once this is live, and it’s requesting the images from the same server that it’s on, it will be faster.

It turns out that sadly this isn’t the case. This function is just slow because it has to request the entire image and process it to get the information it needs. Later on we just have to resort to something totally different to get smooth loading going. Kind of a bummer. If we could turn back time we should have used the native WordPress media uploader to upload these images rather than a custom field. That way we would have had access to image dimension data that is stored in the database which would have make this all possible.