这些预加载的图像是否正确使用？

Question

这个问题太具体了，所以我无法在互联网上找到答案！

我有一些代码正在加载一些我想在悬停时显示的图像。一切正常，但有时在使用悬停功能的 div 中单击复选框时会出现延迟。

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', '')
 });   

图标路径是数据库中的字符串，所以我想知道......这是使用预加载图像的正确方法吗？因为图像是在准备就绪时加载的，所以它们是从缓存中使用的，还是每次悬停时都会再次加载，因为我没有显示存储的图像对象？

Answer 1

您应该使用此预加载：

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

if (document.images) 用于验证浏览器是否支持图像预加载