Question

我有一些链接，鼠标悬停在这些链接上我正在更改<div>背景图片

jQuery我用过is-

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 -

上添加了一个javascript来预加载图像

<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>

<body onLoad="javascript:preloader()">

但是这个脚本还没有解决我的问题。我该怎么办？

Answer 1

您可能会发现更改方法并使用CSS sprites（and another article）更容易。然后你只需引用一个图像，并使用CSS设置该图像的哪个部分在哪个场景中显示。

这假定您使用的图像在您的控制之下，您可以使用图像编辑器将它们合并为一个大图像。

Answer 2

@ Richard的答案（sprites）可能是你所追求的最好的答案，但你的代码不起作用的原因是在大多数浏览器中，只有最后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对象存在于其自己的专用范围内。

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

如何预加载大尺寸图像？

2 个答案: