如何等待图像，直到完成加载执行下一个操作

Question

我在这里面临一个大问题，每次我调用这个JavaScript函数时，它不会等到left和right图像加载，但它立即进入下一个操作我想要的是停止，直到left和right图像加载图像完全然后它去syllable_text.html(slice.The_Syl);线

function showImagesByPairAtInterval(Syllables, interval, index) { 
     index = index || 0; 
     let slice = Syllables[index]; 
     left.attr('src', "http://example.com/"+ slice.Url1); 
     right.attr('src', "http://example.com/"+ slice.Url2); 
     syllable_text.html(slice.The_Syl); 
     nextIndex = index + 1; 
     if (nextIndex <= Syllables.length - 1) { 
      setTimeout(showImagesByPairAtInterval.bind(
       null, 
       Syllables, 
       interval, 
       nextIndex 
      ), interval); 
     } 
} 

在这里，我如何调用该函数

showImagesByPairAtInterval(syllables.Syllables, 3000); 

个这里的拖车图像

<div id="images" style="display: flex;"> 
    <img src="" id="left_image" name="left_image" alt="" /> 
    <img src="" id="right_image" name="right_image" alt="" /> 
</div> 

更新脚本

使用ImagesLoaded脚本，我在ImagesLoaded 发现像

function showImagesByPairAtInterval(Syllables, interval, index) { 
     index = index || 0; 
     let slice = Syllables[index]; 
     left.attr('src', "http://deaf-api.azurewebsites.net/"+ slice.Url1); 
     right.attr('src', "http://deaf-api.azurewebsites.net/"+ slice.Url2); 
     while (!$("#images").imagesLoaded().always()) { 
     } 
     syllable_text.html(slice.The_Syl); 


     nextIndex = index + 1; 
     if (nextIndex <= Syllables.length - 1) { 
      setTimeout(showImagesByPairAtInterval.bind(
       null, 
       Syllables, 
       interval, 
       nextIndex 
      ), interval); 
     } 
} 

现在看来似乎并不关心，当所有后图像真的完成加载我假设有第二种方式来使用此脚本

Answer 1

好吧，我想发布解决方案，因为我认为这个问题ImagesLoaded脚本可能不知道left和right图像被加载或没有，所以我决定做出新的图像，我可以告诉它尚未加载和之后我检查它的加载我改变left和right相似图片

function showImagesByPairAtInterval(Syllables, interval, index) { 
      index = index || 0; 
      let slice = Syllables[index]; 
      var left_img = new Image(); 
      var right_img = new Image(); 
      var div_img = document.createElement('div'); 
      var $div_img = $("<div>"); 
      $div_img.append(left_img); 
      $div_img.append(right_img); 
      left_img.src = "example.com/" + slice.Url1; 
      right_img.src = "example.com/" + slice.Url2; 
      while (!$div_img.imagesLoaded().done()) { 
      } 
      left.attr('src', "http://example.com/" + slice.Url1); 
      right.attr('src', "http://example.com/" + slice.Url2); 

      syllable_text.html(slice.The_Syl); 


      nextIndex = index + 1; 
      if (nextIndex <= Syllables.length - 1) { 
       setTimeout(showImagesByPairAtInterval.bind(
        null, 
        Syllables, 
        interval, 
        nextIndex 
       ), interval); 
      } 
}