3

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

我用过的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 秒才能更改更改，但是我第二次将鼠标悬停在图像上时会立即更改，我认为这是因为浏览器存储图像缓存。所以我添加了一个 javascript 来在 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>

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

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

4

2 回答 2

3

您可能会发现更改方法和使用CSS 精灵（和另一篇文章）更容易。然后，您将只引用一张图片，并使用 CSS 设置该图片的哪一部分在哪个场景中显示。

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

于 2010-07-21T09:43:53.857 回答
3

@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对象存在于它自己的专用范围内。

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

于 2010-07-21T13:39:19.420 回答