CODEWITHSUNDEEP
javascriptjquery
mila
mila

Reputation: 509

Set a timeout on jQuery .load() callback

I'm loading an image with handlers for valid images and invalid ones:

$('<img/>')  
.attr('src',$scope.newAssetData.newAssetUrl)
.load(validImage)
.error(invalidImage);

I would like to set a timeout on load. Meaning, if an image takes more than t time to load, then do something (for example, go to the invalidImage handler).

Any ideas how to do it?

Thank you, Mila

Upvotes: 0

Views: 1242

Answers (2)

A. Wolff
A. Wolff

Reputation: 74410

I think you want to use a timeout this way for example:

var delay = 1000, /* if image takes more than one second to load, call error handler */
    $img = $('<img/>').load(validImage)
        .error(invalidImage)
        .attr('src', $scope.newAssetData.newAssetUrl); /* set src after relevant events to hanlde older browsers cached src */
setTimeout(function () {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        $(this).off('load');
        invalidImage.call(this);
    }
}.bind($img[0]), delay);

Upvotes: 1

awj
awj

Reputation: 7959

I don't believe you can set a timeout directly on .load().

However, if you want to load images asynchronously then you could write the request out the long way, i.e., using .ajax(), then you can set a timeout.

According to the documentation for .load() "it has an implicit callback function", so you'd have to populate this yourself

For example:

$.ajax({
    url: [image src],
    timeout: [in milliseconds],
    type: "GET",
    success: function(response) {
        // I'm not sure what you'll be getting as your response
    },
    error: function(jqXHR, textStatus, errorThrown) {
    }
});

Here's the full documentation for .ajax().

Upvotes: 0

Related Questions