CODEWITHSUNDEEP
javascriptjquery
Dustin
Dustin

Reputation: 4459

jQuery load() appears to get stuck/hang

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:

  1. Click Image 3 button
  2. Click Hide button
  3. Click Image 3 button again
  4. 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?).

Upvotes: 0

Views: 1711

Answers (2)

Jason P
Jason P

Reputation: 27012

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

Upvotes: 1

Tim Sheehan
Tim Sheehan

Reputation: 4014

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/

Upvotes: 0

Related Questions