Question

I have two JavaScript functions that I want to call from inside of a jQuery function. Because I load images dynamically, I want to check the width of each image by calling the two functions func1() and func2() that will check the width.

If width < 20px then double width

I don’t want to wait for the images to fully load then do the check.

I tried this but didn’t work

$(document).ready(function ()
{
    $('img').each(function()
    {
       ....
    })

    func1();
    func2();
})

function func1()
{
   ....
}

function func2()
{
   ....
}

What am I missing?

Answer 1

Unless the img tags have the width specified you will not be able to correctly get the width before it is completely loaded. The browser has no way of knowing what are the dimensions until it has the entire image.

Here is a way to wait until the images are loaded:

Official way to ask jQuery wait for all images to load before executing something