0

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

http://jsfiddle.net/dmcgrew/LLMs8/3/

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

  1. 单击图像 3 按钮
  2. 单击隐藏按钮
  3. 再次单击图像 3 按钮
  4. 加载图形现在卡在页面上。

这是我的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？）。

4

2 回答 2

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();
});
于 2013-09-24T13:41:41.457 回答
0

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

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

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

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

于 2013-09-24T13:33:16.593 回答