CODEWITHSUNDEEP
javascriptimagesettimeout
Patrick Keane
Patrick Keane

Reputation: 663

Finding height of image using JavaScript - image load error

I can't seem to find the height of an image using Javascript on a Typo3 website.

Basically I have javascript that runs inside a $(document).ready(function () { . It looks for an image on the page and finds its height & width, then carries out opperations based on the results.

Sometimes this works and sometimes it doesn't. Usually, I get a width value but no height. I suspect this is because the browser hasn't finnished loading the image.

To solve this I have included a 2second delay to ensure img is loaded before looking for its height. But that isn't a very good way of solving the problem, especially if someone has low download speeds.

How else could I check that an image is loaded fully before carrying out opperations?

Here is some HTML:

<div class="resize-thumb-img">
    <img src="#.jpg" />
</div>
<div class="resize-thumb-img">
    <img src="#.jpg" />
</div>
<div class="resize-thumb-img">
    <img src="#.jpg" />
</div>

And some JS:

$(document).ready(function () {

    setTimeout(myFunctionX, 2000);

    function myFunctionX() {
        $(".resize-thumb-img img").each(function(){  //for each image

            console.log("working on image: "+$(this).width() +"x"+$(this).height());

            /* MORE WORK HERE */
        });
    }
});

The console log can give results like 235x420 OR 235x0 OR 0x0

Upvotes: 1

Views: 128

Answers (4)

kevmc
kevmc

Reputation: 1294

What you need to do is bind a function to the load event for any images that aren't yet loaded, something like this

function processImage(imageElement){
    // do your stuff here
    var img=$(imageElement);
    console.log("working on image: "+img.width() +"x"+img.height());
}

$(document).ready(function () {
    // iterate through the images
    $(".resize-thumb-img img").each(function(){
        var img = $(this);
        if(img.width()==0 || img.height()==0){
            // image has not fully loaded yet, so process it once loaded
            img.on('load',function(){processImage(this);})
        }else{
           // image is loaded so process the image straight away
            processImage(this);
        }
    })
})

Upvotes: 0

Patrick Keane
Patrick Keane

Reputation: 663

I found a solution which I think helps in this context. It checks an image to see if its width is "0". If it is, it waits 1 second and then tries again. If its not "0", it calls the function I had before. Might be useful to include || null to the first if statement - I havn't tested on all browsers.

$(document).ready(function () {

    checkLoadState();

    function checkLoadState()   //checks to see if images are loaded before continuing
    {
        if ($(".resize-thumb-img img").width() != "0")
        {
            console.log("Images loaded. Resizig...");
            myFunctionX();
        }
        else
        {
            console.log("Waiting for images to load.");
            setTimeout(checkLoadState, 1000); // check again in a second
        }
    }

    function myFunctionX() {
        $(".resize-thumb-img img").each(function(){  //for each image

            console.log("working on image: "+$(this).width() +"x"+$(this).height());

            /* MORE WORK HERE */
        });

        }
});

Upvotes: 1

Mark Bertenshaw
Mark Bertenshaw

Reputation: 5689

If you have control over the server-side scripts, couldn't you simply store the size of the bitmap in a database together with its filename? Then you could set the WIDTH and HEIGHT attributes of the IMG elements.

Upvotes: 0

Rajesh
Rajesh

Reputation: 7

You can try the below one:

$('img').each(function() {

    $(this).attr('height',$(this).height());

    $(this).attr('width',$(this).width());

});

This will help you to find the height of your image using jquery.

Upvotes: 0

Related Questions