Using a script to cache an image

Question

I am using TimThumb, which is a PHP script for resizing images.

It caches the image, and my web application relies on this caching to work properly.

When the image is not cached on the server, this does not work correctly, I am wondering if there is a way to make timthumb cache the image and then extract it, or if there is a way to use JavaScript to make sure the image is cached first.

Answer 1

In order for the browser to preload the image into the cache, you can use some of your own JavaScript objects.

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

Now that you give the <img> tag the src attribute, which matches PATH_TO_IMAGE , it has already been preloaded by the browser.

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

---

You can also load some images into your HTML and just use some CSS tricks to hide them -

• display:none

  or

• visibility:hidden

and then display them only when fully loaded. You can use the .load() function for this. Just attach it to the <img> -

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