Do stuff when image has loaded

Question

I'm trying to improve this script with a load function, so that the loading gif animation $(".loader").show(); will be hidden with $(".loader").hide(); when the image has been loaded. I have tried to use the .load() method, but then noting works! The important thing with this script is that it only affect the .mainImage within its article element of several article elements that also has a .mainImage.

Would it be possible to add $(".loader").hide(); when the image has loaded?

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

Answer 1

Try this code

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