Question

我正在尝试加载相同的图像但是具有不同的分辨率，一个接一个，首先是1.png，然后是2.png然后3.png，在promises的帮助下，但是当我运行代码时，它只加载3.png图片，我做错了什么？

display:block

第一个建议之后的新代码仍然面临同样的问题，只有一个图像被加载，如chrome dev工具中所见

function loadi(srce){
        if(srce!='3.png'){
        $img1.attr('src',srce).on('load',function(){

            return loadImag();
        });
        }
        else{
            $img1.attr('src',srce).on('load',function(){
                console.log("Load successful");
            });
        }
    }
    function loadImag(){
        return new Promise(function(fulfill,reject){
            fulfill();
        }); 
    }
    loadImag()
            .then(loadi('1.png'),null)
            .then(loadi('2.png'),null)
            .then(loadi('3.png'),null);

Answer 1

您的代码几乎没有问题：

loadi不会返回Promise。从回调返回无法按预期工作。
loadImag基本上可以替换为Promise.resolve()。
.then()期待一个函数，你传递函数的结果。

您的代码应如下所示：

function loadImage(src) {
  return new Promise(function(resolve, reject) {
    // Run image loading logic here
    // Call resolve() when loading complete, or reject() when fails.
  )};
}

loadImage('1.png')
  .then(function() { return loadImage('2.png'); })
  .then(function() { return loadImage('3.png'); })
  .then(function() { console.log('Load successful!'); }) // Not in loadImage().
  .catch(function(err) { /* Handle potential errors */ });

使用承诺增量加载图像

1 个答案: