Mach Sachen, wenn das Bild geladen wurde

Question

Ich versuche dieses Skript mit einer Ladefunktion zu verbessern, so dass die geladene GIF-Animation $(".loader").show(); mit $(".loader").hide(); ausgeblendet wird, wenn das Bild geladen wurde. Ich habe versucht, die .load() Methode zu verwenden, aber dann funktioniert es! Das Wichtigste bei diesem Skript ist, dass es nur die .mainImage innerhalb seines Artikelelements von mehreren Artikelelementen betrifft, das auch eine .mainImage hat.

Wäre es möglich, $(".loader").hide(); hinzuzufügen, wenn das Bild geladen wurde?

$(".buttonContainer ul li a").click(function(event) { 
    $(".loader").show(); 
    var btnUrl = $(this).attr("href"); 
    $(this).parents(".post").find(".mainImage").attr("src",btnUrl); 
}); 

Answer 1

Versuchen Sie diesen Code

$("<img/>") 
    .on('load', function() { console.log("image loaded"); }) 
    .on('error', function() { console.log("error loading"); }) 
    .attr("src", $(original_Image).attr("src")) 
;