Question

This is quite specific, so I couldn’t just find an answer on the internet!

I have some code that is loading in some images that I want to be displayed on hover. Everything works fine but sometimes there is a delay when clicking a checkbox in divs where the hover function is being used.

jQuery(document).ready(function(){

$icons = [];

$('#boat_icon').hide();

jQuery('.boat_row').each(function(e){
            $icons.push('url("' + $(this).attr("id") + '")');
            });

jQuery($icons).each(function(e){

jQuery('#boat_icon').css('background-image', this);

console.log(this + "loaded!");

});

$('#boat_icon').show();
});

 jQuery('.boat_row').hover(function(e){
     e.preventDefault();

     $(this).css('background-color', 'D8EAFF')

     var iconpath = $(this).attr("id");
     $('#boat_icon').css('background-image', 'url("'+iconpath+'")');
     },

     function(){
     $(this).css('background-color', '')
 });   

The iconpath is a string in the database, so I was wondering… is this the correct way to use preloaded images? Because the images are loaded on ready, are they then being used from the cache or are they being loaded again every time on hover because im not displaying a stored image object?

Answer 1

You should use this preloading:

if (document.images)
{
  pic1= new Image(100,25); 
  pic1.src="http://someplace.com/image1.gif"; 
}

if (document.images) is used to verify doesn’t browser support preloading for images