CODEWITHSUNDEEP
jqueryimagepluginswebkitgoogle-chrome
Soviut
Soviut

Reputation: 91525

How to ensure images are loaded inside a JQuery plugin?

While creating a JQuery plugin that required image dimensions, I discovered that webkit browsers like Chrome often return 0 size for images because they're loaded in parallel.

My quick and dirty solution was to wrap the code that calls my plugin in a $(window).load() event:

$(document).ready(function() {
    $(window).load(function() {
        $('.magnifier').magnifier();
    });
});

How would I go about implementing this inside the plugin itself? What is the cleanest way to detect that images have loaded so I can measure their dimensions?

Upvotes: 1

Views: 621

Answers (2)

Andy Gaskell
Andy Gaskell

Reputation: 31761

I'm not sure I understand completely but this will fire after all images are loaded.

$("img").load(function() { 

});

Upvotes: 1

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

Images have a load() event, so you could do something like:

$(document).ready(function() {
    $('.magnifier').magnifier();
});

$.fn.magnifier = function() {
    return this.each(function() {
        $(this).find('img').load(function() {
            // do something to image when it is loaded
        });
    });
}

You could also simply wrap the code around window.load inside the plugin itself:

$.fn.magnifier = function() {
    var that = this;
    $(window).load(function() {
        that.each(function() {
            $(this).find('img').each(function() {
                // image would be loaded at this point
            });
        });
    });
    return this;
}

Upvotes: 3

Related Questions