Using script to cache image

Question

I'm using TimThumb which is a PHP script for resizing images.

It caches the image, and my web application relies on that caching to operate properly.

When the image is not cached on the server, it doesn't work right, I'm wondering if there's a way to force timthumb to cache an image, and then retrieve it, or if there's a way to use JavaScript to ensure the image gets cached first.

Answer 1

To ensure the browser preloads an image into cache, you can use some native JavaScript objects.

var imgPreload = new Image();
imgPreload.src = PATH_TO_IMAGE;

Now when you give an <img> tag an src attribute that's the same as PATH_TO_IMAGE, it'll already have been preloaded by the browser.

<img src="PATH_TO_IMAGE" width="100%" >

---

You could also load some images into your HTML and simply use some css trickery to hide them -

• display:none

  or

• visibility:hidden

then only display them when they are fully loaded. You could use the .load() function for that. Just attach it to the <img> tag -

$("#imageSelector").load(function(){
  // image was fully loaded.
});