JQuery的：等待改變形象src屬性加載

Question

我完全新的JavaScript和jQuery和我有以下問題，我是不是能夠解決通過閱讀其他SO Q &作爲：

我有一種函數，用於獲取圖像的路徑（/API/currentImage）並且想要更改img的src屬性，然後在1秒後重復其自身。到目前爲止，這麼好，下面的代碼工作。但是：如果圖像很大，圖像本身的GET可能需要很長時間（超過1秒）。所以我不想在AJAX請求完成時執行setTimeout，而是在最後加載圖像時（「$('img').attr("src", r1[0])完成後加載圖像」）。

loadImg = function() { 
    $.when(
    $.ajax({ 
     url: "/API/currentImage" 
    }), 
    $.ajax({ 
     url: "/API/currentId" 
    }) 
).done(function(r1, r2) { 
    $('#iid').text(r2[0]) 
    $('img').attr("src", r1[0]) 
    window.setTimeout(function() { 
     loadImg() 
    }, 1000) 
    }) 
} 

我該如何做到這一點？

Answer 1

類似@ Fribu的答案，我使用one功能，而不是使用on現在implmented它：

$('img').one("load", function() { 
    window.setTimeout(function() { 
     loadImg() 
    }, 1000) 
}).attr("src", newSrc) 

Answer 2

試試這個：

$('img').attr("src", r1[0]).done(function(){ 
    window.setTimeout(function() { 
     loadImg() 
    }, 1000) 
}); 

OR

$('img').load(function() { 
     window.setTimeout(function() { 
      loadImg() 
     }, 1000) 
    }); 

Answer 3

$('img').on("load",...) 

應的伎倆。

新增：

<img /> 

    <div id="hi"></div> 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
    <script> 

    $(document).ready(function() { 
     var i = 0; 
     var h = $("#hi"); 

     $("img")[0].onload = function() { 
     //alert("done"); 
     i++; 
     h.html(i); 
     } 


     $("img").attr("src", "http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e") 
    }); 

    </script>