jQuery load() appears to get stuck/hang

Question

I am using jQuery load() to check if an image that I'm replacing the src on is loaded. Sometimes it appears to get stuck or hang though. I have a jsFiddle link below to check out. To make the loading graphic get stuck on the page click one of the buttons twice.

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

This "almost" replicates a problem on a site I'm currently building, but I think the issues are related. On the site I'm building this "hanging" only happens when I do the following steps:

Click Image 3 button
Click Hide button
Click Image 3 button again
The loading graphic is now stuck on the page.

Here is my 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();
});

Is load() the best way to check if an image has been loaded? Is there a better way that I should replace the image and check if its loaded (maybe AJAX?).

maybe try looking at this solution: http://stackoverflow.com/a/4913155/467164 — Zathrus Writer, Sep 24 '13 at 13:26
Ok, I do see it working fine in Firefox. I've been using Chrome. — Dustin, Sep 24 '13 at 13:30
For the jsfiddle make sure you are clicking one of the buttons twice. For example click Image 1 twice. On the 2nd click, for me, the loading graphic appears and does not go away. This problem is happening in Chrome. Seems to work fine in Firefox though. Haven't tested anything else yet. — Dustin, Sep 24 '13 at 13:31

score 1 · Accepted Answer · answered Sep 24 '13 at 13:41

You have two issues: First, your code attaches the load handler multiple times, which is causing funky behavior. Second, your code doesn't handle multiple clicks on the same element in a row. Try this:

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

score 0 · Answer 2 · answered Sep 24 '13 at 13:33

This problem seems to be related to you trying to load() the same image twice, as the src doesn't actually change I think it's causing problems.

The easiest way to deal with it is just to check if the current src matches the src that has been selected, eg:

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

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

jQuery load() appears to get stuck/hang

2 Answers2