如何延迟加载相同区域中的图像以使其看起来像动画？

基本上我喜欢2张图片，我想在3秒内显示一张图片，然后用另一张图片替换为相同的img标签。如何延迟加载相同区域中的图像以使其看起来像动画？

这是我到目前为止有：

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

所以流第一隐藏#image_area，然后点击＃W40按钮时，删除任何当前图像中的区域和运行show_image_area功能，功能如下：

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); 
    } 
}

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

来源

2011-04-08 KoKo

你必须在代码中额外“：应该是$("#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);

。

来源

2011-04-08 20:17:45 Tyanna

谢谢你们，每一个回答是好，看起来这个是最快的，所以我选择了这个。谢谢 – KoKo 2011-04-08 20:30:31

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

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\" />"); 
     var myWorld = world; 
     setTimeout(function() {$("#tw_image").attr("src", myWorld+"/8.png");}, 3000); 
    } 
}

来源

2011-04-08 20:19:00 James

你setTimeout调用是有点过：

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

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

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

而且，我不知道什么是“世界“，所以我把它合并到新的src路径来修复一个流浪的双引号。

来源

2011-04-08 20:21:02

这个心不是完全测试，但给你一个想法：

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

基本上你立刻射击的setTimeout函数，而不是在一个函数传递稍后发射

来源

2011-04-08 20:24:47

如何延迟加载相同区域中的图像以使其看起来像动画？

回答

相关问题