Javascript 如何延迟加载同一区域的图像，使其看起来像动画？

基本上我有两张图片，我想展示一张3秒钟，然后换成另一张，在同一个img标签中

这就是我到目前为止所做的：

$(function(){
    $("#image_area").hide();
    $('#W40').click(function(){
        $("#image_area img").remove();
        show_image_area('40');
    });     
});

因此，流程首先隐藏#image_区域，然后单击#W40按钮，删除该区域中的任何当前图像并运行show#u image_区域功能，该功能如下：

function show_image_area(world){
    if (!$("#image_area img").length) { //only run if no current image exists   
        $('#image_area').show();
        $('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
        setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);  
    }
}

功能显示图像区域（世界）{
if（！$（“#image_area img”）.length）{//仅在当前图像不存在时运行
$（“#图像_区域”）.show（）；
$（“#图像_区域”）。前置（“”）；
setTimeout（$（“#tw_image”）.attr（“src”，“world+”/8.png），3000）；
}
}

现在，如果我运行这些代码，8.png几乎立即显示，并且没有我想要的3秒延迟。

代码中有一个额外的“延迟”：应该是

$（“#tw_image”）.attr（“src”，world+“/8.png”）

另外，我将把

$（“#tw_image”）.attr（“src”，world+“/8.png”）

放在它自己的函数中

function SwapImage(world)
{
    $("#tw_image").attr("src", world+"/8.png");
}

---

然后将最后一行更改为

setTimeout（SwapImage（world），3000）
这是因为setTimeout的第一个参数不是函数。
这一行还有一个额外的报价。
此外，“world”变量可能需要闭包（不记得了）。
试一试

功能显示图像区域（世界）{
if（！$（“#image_area img”）.length）{//仅在当前图像不存在时运行
$（“#图像_区域”）.show（）；
$（“#图像_区域”）。前置（“”）；
var myWorld=世界；
setTimeout（函数（）{$（“#tw_image”）.attr（“src”，myWorld+“/8.png”）；}，3000）；
}
}
您的电话有点不通：

setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);

第一个参数应该是要执行的函数：

setTimeout(function() { $("#tw_image").attr("src", "world/8.png") }, 3000);

此外，我不确定“世界”是什么，因此我将其合并到新的
src
路径中，以修复一个错误的双引号。
这没有经过充分测试，但给了您一个想法：

$(function(){
    $("#image_area").hide();
    $('#W40').click(function(){
        $("#image_area img").remove()
        show_image_area('40');
    });
});

function show_image_area(world){    
    var newImg = $('<img />').css({width: 1000, height: 1030}).attr({id: 'tw_image', src: world+'/7.png');
    if ( !$("#image_area img").length ) { //only run if no current image exists   
        $('#image_area').prepend(newImg).show('fast');
        setTimeout( function() {
            $("#tw_image").attr("src", world+"/8.png");
        }, 3000);  
    }
}

$（函数（）{
$（“#图像_区域”）.hide（）；
$（'#W40'）。单击（函数（）{
$（“#图像#区域img”）.remove（）
显示图像区域（“40”）；
});
});
函数显示图像区域（世界）{
var newImg=$（'
基本上你的是立即启动setTimeout函数，而不是传递稍后启动的函数
谢谢各位，每个答案都很好，看起来这个是最快的，所以我选择了这个。谢谢
$(function(){
    $("#image_area").hide();
    $('#W40').click(function(){
        $("#image_area img").remove()
        show_image_area('40');
    });
});

function show_image_area(world){    
    var newImg = $('<img />').css({width: 1000, height: 1030}).attr({id: 'tw_image', src: world+'/7.png');
    if ( !$("#image_area img").length ) { //only run if no current image exists   
        $('#image_area').prepend(newImg).show('fast');
        setTimeout( function() {
            $("#tw_image").attr("src", world+"/8.png");
        }, 3000);  
    }
}