JQuery: Warten auf Attribut verändertes Bild src geladen werden

Question

Ich bin völlig neu in JavaScript und JQuery, und ich habe folgendes Problem ich war durch das Lesen anderer SO Q & Wie zu lösen nicht in der Lage:

Ich habe eine Funktion, die den Pfad zu einem Bild abruft (/API/currentImage) und das src Attribut eines img ändern möchte und sich dann nach 1 Sekunde wiederholt. So weit, so gut, der folgende Code funktioniert. Aber: Wenn das Bild groß ist, kann das GET für das Bild selbst ziemlich lange dauern (länger als 1 Sekunde). Also ich möchte setTimeout nicht ausführen, wenn die AJAX-Anfragen beendet sind, aber wenn das Bild endlich geladen ist ("Das Laden des Bildes nach $('img').attr("src", r1[0]) ist beendet").

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

Wie kann ich das erreichen?

Answer 1

Ähnlich @ Fribu Antwort, ich implmented es nun die one Funktion verwenden, anstatt on der Verwendung:

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

Answer 2

Versuchen Sie folgendes:

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

ODER

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

Answer 3

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

zum Trick sollte.

ZUSÄTZLICH:

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