3 
$('.ro').hover(
    function(){
        t = $(this);
        t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_o.$2"));
    },
    function(){ 
        t = $(this);
        t.attr('src',t.attr('src').replace('_o',''));
    }
 );

我使用此代码，以便（例如）带有类 'ro' 的 test.gif 在翻转时更改为 test_o.gif，问题是当图像不在缓存中时，翻转和翻转时会出现延迟。

基本上，如果我清除缓存并访问测试页面，每次我翻转和翻转图像时，它每次都会加载文件，所以你可以在那里坐几个小时，但每次它仍然会加载翻转图像。但是，当我刷新页面并且图像现在在缓存中时，它会立即工作，这是我需要实现的。

我试过用这个

http://flesler.blogspot.com/2008/01/jquerypreload.html

用这个预加载图像的插件

$.preload('.ro');

代码，但它似乎没有效果。

有任何想法吗？

4

2 回答 2

4

只需在准备好的文档上创建一个虚拟图像，不需要插件。

$(function(){
   $('<img />').attr('src',url);
});
于 2009-07-09T11:41:57.743 回答
0

将您的与使用 jQuery 预加载图像中的结合起来，您将获得一个简短的脚本，该脚本将预加载图像，然后将它们悬停在指定选择器的任何内容上。例如

    //preload images
    $('.ro').each(function(){
        $('<img/>').appendTo('body')
            .css({ display: "none" })
            .attr('src',$(this).attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2"));
    });
    //hover them
    $('.ro').hover(
        function(){
            t = $(this);
            t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2"));
        },
        function(){ 
            t = $(this);
            t.attr('src',t.attr('src').replace('_on',''));
        }
     );

这种方法是将它们附加到 body 标记以处理 IE 丢弃未添加到 DOM 的图像的问题（如与此相关的另一篇文章中所述），但您可以将它们粘贴在对您有意义的任何地方。

我喜欢这篇文章中的方法，因为您不必提前声明一组图像，只需采用翻转的命名约定和类名，您就可以排序了。

于 2010-05-19T08:27:50.797 回答