Question

I have written a captcha image verification in PHP which supports captcha image reloading. During the reload, the script displays a loading wait animated image. Using slow internet connections leads to delay in displaying that image. I solved this issue by inserting this image at the first of client-side script for the captcha script as hidden image to ensure its loading at the client’s cache before using the reload functionality:

<img src="captcha_loading.gif" style="display:none" />

My question is, do this the better way to solve the delay issue? or there is another better way?

Answer 1

You could use some javascript to force loading the graphic in memory (cache) without needing to have a separate element on the page:

Image capchaImage = new Image();
capchaImage.src = "/path/to/captcha_loading.gif";
capchaImage.onload = function(){
    ///Do something when image is done loading
    document.getElementById('capcha').src = capchaImage.src;
    document.getElementById('capcha').style.display = 'block'; // or inherit
}