只有在执行完先前的陈述后才能开始的陈述

Question

这里是初学者问题。我正在使用JavaScript和jQuery构建照片查看器。

当您单击箭头查看下一张图片时，我想让当前图片淡出，然后下一张图片淡入。我得到的问题是，如果图片花了一点时间才能加载，当我开始淡入淡出的时候，我已经把旧照片留在那里，所以我需要确保在新照片加载之前淡入不会进入。

所以这三个语句必须运行，如果以前已经执行每一个仅执行：

$('#image').fadeOut(500); 
getImage(); 
$('#image').fadeIn(500); 

这里是我的功能来获得新的形象：

getImage = function() { 
    document.getElementById("image").src = "Images/Image" + counter + ".jpg"; 
} 

哪里计数器我之前声明的变量在点击“下一步”按钮等时得到更新...

所以，不知道那么多关于编程，我正在寻找一种方式Ø确保

$('#image').fadeIn(500); 

不运行，除非新的图像已被提取或发生的事情是，旧的形象开始在那么我们得到的新的衰落。

我打电话试图回来，就像这样：

$('#image').fadeOut(500, function() { 
     getImage(); 
}); 

$('#image').fadeIn(500); 

但是，这并不工作，你会需要一个秋天的后备之内回来，我不知道如何做到这一点。

我已经试过的另一件事是做这样的事情：

var hasloaded = $('#image').fadeOut(500, function() { 
    getImage(); 
}); 

if (hasloaded) 
{$('#image').fadeIn(500);} 

这也不行，虽然我还以为我被真正聪明的，当我写的。

任何帮助表示赞赏。

谢谢。

Answer 1

您可以创建一个JavaScript Image对象，并在load事件设置src目标元素

$('#image').fadeOut(500, function() { 
    getImage(function() { 
     $('#image').fadeIn(500); 
    }); 
}); 

getImage = function (cb) { 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementById("image").src = img.src; 
     cb(); 
    }; 
    img.src = "Images/Image" + counter + ".jpg"; 
} 

---

使用promise()

$('#image').fadeOut(500, function() { 
    getImage().then(() => { 
     $('#image').fadeIn(500); 
    }); 
}); 

getImage = function() { 
    return new Promise((resolve, reject) => { 
     var img = new Image(); 
     img.src = "Images/Image" + counter + ".jpg"; 
     img.onload = function() { 
      document.getElementById("image").src = img.src; 
      resolve("Success!"); 
     }; 
    }); 
}