jquery image load check error

Question

i'm trying to check if all images are loaded within a container using the below code

$(document).ready(function () {
    $(".slide img").each(function (index) {
        var fakeSrc = $(this).attr('src');
        $("<img/>").attr("src", fakeSrc).css('display', 'none').load(function () {
            alert('loaded');
        }).
        error(function () {
            load_img_Single(fakeSrc);
        });
    });
    function load_img_Single(img) {
        alert(img);
        var ruth;
        $("<img/>").attr("src", img).css('display', 'none').load(function () {
            ruth = 'yeap';
        }).error(function () {
            ruth = 'nope';
        });
        alert(ruth);
    }
});

now as u can see im using a fake container to load the image and check if it has been loaded or not .

im using the .error in the first check of image to see if it was loaded properly or not , if not it executes the function load_img_Single(image) function of mine to load it again.

now in that function again im checking if it was loaded or not . but the problem is the variable 'ruth' is not getting set to anything within that function. its been declared outside but still its coming as 'undefined'.

any insight would be appreciated guys.

Loading an image is asynchronous, it does not block the browser, so the code continues execution and the callback is called once the image is loaded, and when you check your variable the callback hasn't executed yet. — adeneo
– adeneo, Commented Nov 24, 2013 at 12:50

Khanh TO · Accepted Answer · 2013-11-24 12:50:27Z

1

The reason is loading image is asynch. When you call:

$("<img/>").attr("src", img).css('display', 'none').load(function() {
        ruth = 'yeap';
    }).error(function() { ruth = 'nope'; });

The load or error do not fire yet. That's why ruth is undefined when you call alert(ruth); right after that

answered Nov 24, 2013 at 12:50

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Khanh TO Over a year ago

@user1690718: because browsers are single-threaded. Synchronous operations are not recommended in browsers as it will block. You should put your code inside callback

A. Wolff Over a year ago

@user1690718 .load(callback), in fact .on('load',callback) is an event, event cannot be 'sync', that's a non sense as event get fired reacting to something happening. Here once image get loaded. You can manually trigger event (handler) but this is not what you are looking for here

Khanh TO Over a year ago

@user1690718: workarounds are always not good and not recommended. Asynchrony is browser's nature, we should not go against it. If you still need a workaround, you could take at look at some discussions like preloading images stackoverflow.com/questions/9421202/…, stackoverflow.com/questions/1149829/…

Collectives™ on Stack Overflow

jquery image load check error

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related