CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8
user2291466
user2291466

Reputation: 1

Image width after load returns 0

Can someone help me figure out what I'm doing wrong here? IE8 returns 0 for the width of these images regardless. Works fine everywhere else.

$('#hometown li img').load(function()
{
    var imgWidth = parseInt($(this).width());
    var percent = (99.99 * (imgWidth / 1600)) + '%';

    console.log(imgWidth) // <- Always 0 in ie8

    $(this).parent().css({ 'width': percent });
});

Upvotes: 0

Views: 931

Answers (1)

adeneo
adeneo

Reputation: 318182

Try attaching a native onload to each image seperately instead, and trigger the onload if the complete property is true to avoid caching issues :

$('#hometown li img').each(function() {
    this.onload = function() {
        var imgWidth = this.width();
        var percent = 99.99 * (imgWidth / 1600);

        console.log(imgWidth);

        this.parentNode.style.width = percent + '%';
    }
    if(this.complete) this.onload();
});

Upvotes: 1

Related Questions