Question

in my form load i download a image using jquery and when user click on any button then i am showing that image in my div. but only first time image is taking time to visible. if image is downloaded at form load so when i am showing that image through jquery then i think it should not download again and it should be visible very quickly.

here is my code

 var _images = ['/Images/ajax-loader.gif'];
   $.each(_images, function (e) {
       $(new Image()).load(function () {
           //alert($(this).attr('src') + 'has loaded!');
       }).attr('src', this);
   });

through the above routine i am downloading image at form load with the help of jquery.

so when i am showing that image when user click on button like below one

                   $('#loader').html('<table border="0" style="width:auto"><tr><td valign="middle">Wait...</td><td valign="top"><img height="20px" width="20px" src="/images/ajax-loader.gif" border="0" /></td></tr></table>');

loader is my div

so the image should not download again rather it should show from the client machine.
so please guide me what is wrong in my code that image is download at form load and inspite of that it is again loading for the first time. please help…thanks

Answer 1

You’re pre-loading /Images/ajax-loader.gif and using /images/ajax-loader.gif (note I/i). I suspect the browser regards them as different pictures.