Javascript jQuery load（）似乎被卡住/挂起

我正在使用jQuery

load（）

检查我正在替换的

src

上的图像是否已加载。有时它似乎被卡住或挂起。我在下面有一个JSFIDLE链接要查看。要使加载图形卡在页面上，请单击其中一个按钮两次

这个“几乎”复制了我目前正在构建的站点上的一个问题，但我认为这些问题是相关的。在我正在构建的站点上，只有当我执行以下步骤时，才会发生这种“挂起”：

单击图像3按钮

单击隐藏按钮

再次单击图像3按钮

加载图形现在已粘贴在页面上

这是我的JS

$("button").not("off").bind("click", function(){

    var imgPath = $(this).attr("data-image"); //grab image path from data attr
    console.log(imgPath);

    $(".loading").show(); //show loading gif
    $("img.the_image").hide(); //hide the img

    $("img.the_image").attr("src","http://farm7.staticflickr.com/"+imgPath).load(function() { 
        $(".loading").hide(); //hide loading gif
        $("img.the_image").show(); //show the newly loaded img
    });

});

$("button.off").bind("click", function(){
    $("img").hide();
});

---

load（）

是检查图像是否已加载的最佳方法吗？是否有更好的方法来替换图像并检查其是否已加载（可能是AJAX？）

这个问题似乎与您尝试加载（）相同的图像两次有关，因为src实际上没有改变，我认为这是造成问题的原因

处理此问题的最简单方法就是检查当前src是否与已选择的src匹配，例如：

if($('img.the_image').attr('src') != 'http://farm7.staticflickr.com/' + imgPath) { }

---

您有两个问题：首先，您的代码多次附加负载处理程序，这导致了不正常的行为。其次，您的代码不会处理一行中同一元素的多次单击。试试这个：

---

对我有用。您使用的是什么浏览器？也许可以看看这个解决方案：JSFIDLE在这里工作好了，我确实看到它在Firefox中工作得很好。我一直在使用Chrome。对于JSFIDLE，请确保单击其中一个按钮两次。例如，单击图像1两次。对我来说，在第二次单击时，加载图形会出现并且不会消失。这个问题发生在Chrome中。不过在Firefox中似乎工作得很好。还没有测试过其他东西。

$("button").not("off").bind("click", function () {

    var imgPath = $(this).attr("data-image"); //grab image path from data attr
    var newImgPath = 'http://farm7.staticflickr.com/' + imgPath;

    if ($('img.the_image').attr('src') != newImgPath) {

        $(".loading").show(); //show loading gif
        $("img.the_image").hide(); //hide the img

        $("img.the_image").attr("src", newImgPath);
    }

});

$("img.the_image").load(function () {
    console.log('load handler');
    $(".loading").hide(); //hide loading gif
    $("img.the_image").show(); //show the newly loaded img
});

$("button.off").bind("click", function () {
    $("img").hide();
});