Question

我正在使用jQuery load()检查我是否正在加载我正在替换src的图像。有时它似乎卡住或挂起。我在下面有一个jsFiddle链接来查看。要使加载图形卡在页面上，请单击其中一个按钮两次。

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

点击图片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？）。

Answer 1

您有两个问题：首先，您的代码多次附加加载处理程序，这会导致时髦的行为。其次，您的代码不会连续处理同一元素的多次点击。试试这个：

http://jsfiddle.net/E3Avx/

$("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();
});

Answer 2

这个问题似乎与你试图加载（）两次相同的图像有关，因为src实际上并没有改变，我认为这会导致问题。

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

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

http://jsfiddle.net/LLMs8/7/

jQuery load（）似乎卡住/挂起

2 个答案: