在图像加载时执行操作

Question

我尝试使用加载函数改进此脚本，以便在加载图像时使用$(".loader").show();隐藏加载gif动画$(".loader").hide();。我曾尝试使用.load()方法，但随后注意到了！这个脚本的重要之处在于它只会影响其文章元素中.mainImage的几个文章元素.mainImage。

图像加载后是否可以添加$(".loader").hide();？

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

Answer 1

试试此代码

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