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

我有一个非常简单的jQuery脚本，可以在缩略图悬停时更改图像并显示alt文本

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

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

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

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

在显示文本之前，您不能添加延迟（500）呼叫吗？像这样：

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

---

这是因为img正在加载async so事件。如果在将alt写入div之前设置了它的src，则加载事件将在之后结束。 您可以使用设置超时功能（快速和脏）或使用img加载事件：

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

---

这是一个更干净的解决方案。

我认为如果您预加载图像，它将更快地为您工作：

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

---

这将导致浏览器下载图像，当您设置

img

标记的src时，应该没有延迟时间。

看起来像是Javascript图像预加载问题的典型案例，就像大多数其他答案一样。我经常在Javascript中使用预加载功能，我只是想将我的2cents答案作为另一个选项，希望它能有所帮助！：）

---

另外，还有一些更一般的建议：研究jQueryAPI而不是猜测（您不能给出attr（）三个参数），然后阅读“链接”

---

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

我想问：这在所有浏览器中都有效吗？我在Internet Explorer（uduh！）中得到了一些非常有趣的结果，当时它无法验证像

Image（）

的

。请完成
属性…否则，这是一个非常干净的解决方案！我没有在旧的IE版本中进行测试，但我可以说这在所有现代浏览器（包括移动浏览器）中都非常有效西蒙库姆斯请考虑接受这个答案，如果这是你所看到的。for@andreapier这看起来和解决方案一模一样，但作为JQuery的新手，我不清楚如何替换image.Well的src属性。只要给我一个jsfiddle.com示例，我会根据您的需要对其进行编辑
$("#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;

});