Cutting To The Chase

I am currently in the process of developing a site where users are allowed to submit images. While putting some final touches on the site, my colleague and I discovered that web browsers using the Webkit engine (Google Chrome and Safari) have quite the annoying issue of firing the .load(); method (or lack thereof) under certain circumstances.

We discovered that in Webkit, if you are trying to execute a function that is dependent on images only after they have all loaded on the page; the said function will fail. This is presumably because Webkit caches the images, and caches them HARD! So when you run your function to wait until the images have been loaded say: $(window).load(); your code will fail because the images have technically been loaded already.

To solve this issue I had to prevent the images from caching...

The Long Answer

The website that I am working on allows users to post images. These images are children of a parent block container. By default the images' width are set to 100% of the parent container, however the height is not being set on the images. With this default setup the images just sort of hangout at the top of the parent container. Not very visually appealing. Javascript was written to wait until the entire page is loaded, then loops through all the images and calculates the amount of margin needed to center the image in the middle of the parent container.

This code worked great except when we tested it in Google Chrome and Safari. During the testing we noticed that the function was not waiting for the entire page to load (or so we thought at the time) before executing. The problem was that in browsers that use the Webkit engine if the source of the image has already been cached then the browser does not re-download the images.

The Final Solution

Don't let the images get cached. Pretty simple and straightforward. All I did was add a parameter to the image that has a random number as the value every time the page loads. This creates a new source, effectively blocking this image from being cached.

<img src="/some/cool/path/image.jpg?=<?php echo rand(0, 999); ?>" />