Question

$('.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');

代码，但似乎没有效果。

有什么想法吗？

Answer 1

只需在doc ready上创建一个虚拟图像，不需要插件。

$(function(){
   $('<img />').attr('src',url);
});

Answer 2

将您与Preloading images with 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的图像的问题（如与此相关的其他帖子中所述），但是您可以将它们粘贴到任何有意义的地方你。

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

jQuery Rollovers没有预加载

2 个答案: