Question

我有一个非常简单的jQuery脚本来更改图像并在缩略图悬停时显示替代文字。

图像和Alt文本都显示在同一个div中。代码可以工作，但文本会在图像更改之前显示，因此可以简短地调整长文本的div值：

$("#thumbwrapper li img").hover(function(){
    $('#main_img').attr('src',$(this).attr('src').replace('thumb/', ''));
    $("#desc").html( $(this).attr("alt") );
});

我需要订购这两个，以便IMAGE首先更改，然后更改alt文本。我猜我需要嵌套第二个函数，但不知道如何。这是我对嵌套函数（）的猜测，但它只是打破了alt文本的变化：

$("#thumbwrapper li img").hover(function(){
    $('#main_img').attr('src',$(this).attr('src').replace('thumb/', ''),function(){
        $("#desc").html( $(this).attr("alt") );
    });
});

Answer 1

这是因为img正在加载异步所以如果你在将alt写入div之前设置了src，那么load事件就会结束。您可以使用setTimeout函数（快速和脏）或使用img load事件：

var image =new Image();
image.src="your path";
image.load=function(){
   $("#desc").html( $(this).attr("alt") );
}

image.load();

//add the image into the DOM here

这是一个更清洁的解决方案。

Answer 2

在显示文字之前，您是否可以添加延迟（500）电话？像这样：

$("#desc").delay(500).html( $(this).attr("alt") );

Answer 3

如果您预先加载图片，我认为它会更快地运行：

var image = new Image(); image.src = // image source

这将导致浏览器下载图像，并且在设置img标记的src时应该没有延迟时间。

Answer 4

看起来像Javascript图像预加载问题的经典案例，像大多数其他答案似乎都是针对的。我经常在Javascript中使用预加载功能，我只是想把我的2cents答案作为另一种选择，希望它有所帮助！：）

$("#thumbwrapper li img").hover(function()
{
    // prepare the variables...
    var source = $(this).attr('src').replace('thumb/', '');
    var description = $(this).attr("alt");

    // start the preload...
    // might think of putting a loader message in your app somewhere in case
    // this takes longer than expected...
    var img = new Image();
    img.onload = function()
    {
        $('#main_img').attr('src', source);
        $("#desc").html(description);
    };

    // finally, start the preload...
    img.src = source;

});

Answer 5

另外，一些更一般的建议：研究jQuery API而不是猜测（你不能给attr（）三个参数），然后去阅读“链接”。

如果您不理解链接，那么您将以错误的方式编写大量的jQuery。这里有一个简单的解释：Quick Guide: Chaining in jQuery

Jquery Hover图像和Alt文本 - 执行顺序？

5 个答案: