如何预加载大尺寸图像？

Question

我有某些链接，将鼠标悬停在这些链接上时，我正在更改

背景图像

我使用过的 jQuery 是-

function imgchange()
    {
        $('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        $(this).find('hbg').attr('title', 'my tootip info');
        });     
    }

它工作正常，但问题是当我在服务器图像上运行它时需要 3 -4 秒在更改时更改，但第二次我将鼠标悬停在图像上时会立即更改，我认为这是因为浏览器在缓存中存储了图像。因此，我在 onLoad() ivent -

<script language = "JavaScript">
function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "images/soluinfo1.jpg";
heavyImage.src = "images/soluinfo2.jpg";
heavyImage.src = "images/soluinfo3.jpg";
heavyImage.src = "images/soluinfo4.jpg";
heavyImage.src = "images/soluinfo5.jpg";
heavyImage.src = "images/soluinfo6.jpg";
heavyImage.src = "images/soluinfo7.jpg";
}
</script>

页面上添加了一个 javascript 来预加载图像，但此脚本并没有解决我的问题。我该怎么办？

Answer 1

@Richard的答案（精灵）可能是您所追求的最好的答案，但您的代码不起作用的原因是在大多数浏览器中，只有最后一个 heavyImage.src="" 给出了足够的作为实际请求实际向浏览器注册的时间。您仅创建一个 Image 对象设置并重置 .src 属性，其速度比浏览器请求文件的速度要快（我认为现代 JavaScript 引擎采取了删除所有内容的附加步骤）中间 .src 语句就是因为这个原因）。

有几种方法可以解决这个问题。最简单的方法是创建多个 Image 对象，每个图像对应一个对象。最简单的方法是通过这样的方法：

<script type="text/javascript">
function preloader() 
{
    function doPreload(strImagePath) 
    {
        var heavyImage = new Image();
        heavyImage.src = strImagePath;
    }

    var arrImages = ["images/soluinfo1.jpg","images/soluinfo2.jpg","images/soluinfo3.jpg","images/soluinfo4.jpg","images/soluinfo5.jpg","images/soluinfo6.jpg","images/soluinfo7.jpg"];
    for (var i = 0; i < arrImages.length; i++) {
        doPreload(arrImages[i]);
    }
}
</script>

通过将 heavyImage 变量放入其自己的函数中（记住使用 var 关键字），您可以确保Image 对象存在于其自己的专用范围内。

另一种方法是将“load”事件侦听器附加到单个 heavyImage。每次图像加载完成后，就去获取下一张图像。这种方法的缺点是，您的图像将一次加载一个（对于导航图像不利，但对于图像库来说却很好），而第一种技术将并行获取图像（通常一次四个） 。

Answer 2

您可能会发现更改方法并使用 CSS sprites (以及另一篇文章）。然后，您将只引用一张图像，并使用 CSS 来设置该图像的哪一部分在哪种情况下显示。

这假设您正在使用的图像在您的控制之下，并且您可以使用图像编辑器将它们组合成一张大图像。