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

【问题标题】：Are these preloaded images being used correctly?这些预加载的图像是否正确使用？
【发布时间】：2011-12-14 19:54:39
【问题描述】：

这个很具体，所以我在网上找不到答案！

我有一些代码正在加载到一些我想在悬停时显示的图像中。一切正常，但有时在使用悬停功能的 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', '')
 });

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

【问题讨论】：

最终取决于加载图像的浏览器。您可以尝试通过使用 CSS-sprites 和配置 File-ETags 来改善外观
考虑使用图片精灵，然后用 CSS 改变背景位置，不需要 js
Dr.Molle，Moin Zaman，我见过使用背景定位的 CSS 精灵，但以前从未使用过。有点急于发布此应用程序，因此这次没有时间学习，但感谢您的投入。我看过它们：）非常有用！

标签： jquery image preload

【解决方案1】：

你应该使用这个预加载：

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

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

【讨论】：

这是我在周围看到的，但不幸的是似乎不适合用于此应用程序。感谢您的意见！