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
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); ?>" />