CODEWITHSUNDEEP
javascript
Gajus
Gajus

Reputation: 73738

How to check if picture is loaded?

How can I check if a picture is already loaded?

image.src = ay.url_static + 'uploads/apps/' + thumbnail.uid + '.png';
image.onload = function(e)
{                   
    // [..]
};

I know how to trigger a callback upon image is loaded, but how do I check if picture is loaded at the moment?

Upvotes: 1

Views: 221

Answers (3)

Bruno Costa
Bruno Costa

Reputation: 2720

I'm not sure what you want, but from what I understand you need to know if an image is loaded at any moment in time, right?

I've one function do check if the image is valid. You can use it to see if the image is already loaded also if you want. If you don't want to know if the image is valid, you can use only the img.complete property.

function IsImageLoaded(img) {

    if (!img.complete) {
        return false;
    }

    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }

    return true;
}

Upvotes: 1

tybro0103
tybro0103

Reputation: 49693

assuming you're using jQuery...

image.onload = function(e)
{                   
    $(this).data({loaded: true});
};

later...

if($(yourImage).data('loaded')) {
  // it's loaded!
} else {
  // it's not
}

jQuery's .data() is great for setting variables specific to elements.

Upvotes: 0

Max
Max

Reputation: 5081

Set image.loaded = false, and then set image.loaded = true in your onload callback and check that property later?

Or image.complete seems like a legit property, if not W3C.

Upvotes: 0

Related Questions