Question

First of all please dont suggest me to do this using css.

I need to toggle between two images on-hover using Jquery.
I need that two images (two toggling images) should be downloaded at the time of page load. Cause else it will create a lag time for the first time. As my images are two banners on the home page.I need to do something creating a image object , thus pre-loading it and later on toggling the objects.

I cant do this using simple css cause there will be a lag for the first time user as the image is not present on page load. and it gives a bad look.

Answer 1

$(function(){
   var imgs = [
       new Image(),
       new Image()
   ];

   imgs[0].src = 'http://www.typeofnan.com/pic1.jpg';
   imgs[1].src = 'http://www.typeofnan.com/pic2.jpg';

   $('#hoverelement').hover(function(){
      $(this).html(imgs[0]);
   }, function(){
      $(this).html(imgs[1]);
   });
});​

That should work, even if I’m not sure if that is what you need. You can add an onload event to both images to makes sure, they are really loaded before allowing hovering.