Инкрементная загрузка изображений с обещаниями

Question

Я пытаюсь загрузить одно и то же изображение, но с разным разрешением, один за другим, с 1.png сначала, а затем 2.png, а затем 3.png, с помощью обещаний, но когда я запускаю код, он загружает только изображение 3.png, что я делаю неправильно?

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

Нового код после того, как 1-го предложений, по-прежнему сталкивается с тем же вопросом, только одно изображения загружается как видно из хрома Девых инструментов

function loadi(srce){ 

      return loadImage(srce); 

    } 

    function loadImage(src) { 
     return new Promise(function(resolve, reject) { 
      $img1.attr('src',src).on('load',function(error){ 

        resolve(); 
      }); 
// Run image loading logic here 
// Call resolve() when loading complete, or reject() when fails. 
     }); 
    } 

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

Answer 1

Мало что не так с вашим кодом:

• loadi не возвращает обещание. Возврат из обратного вызова не работает должным образом.
• 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 */ });