CODEWITHSUNDEEP
javascriptjqueryimagegoogle-chromeresize
Berry Ligtermoet
Berry Ligtermoet

Reputation: 881

Resizing images in Chrome using JQuery

I just ran into the weirdest of bugs today. I'm not sure if it's a bug in Chrome or something that I can work around but here goes.

I built a JQuery function to resize a set of images that are posted on a forum:

$(".post-message img.post-image").load(function(){
    $(this).each(function() {
        var maxWidth = 200;     
        if($(this).width() > maxWidth)
        {
            var factor = $(this).width() / maxWidth;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css('width', width / factor);
            $(this).css('height', height / factor);
        }       
    });
});

The problem is that this only seems to work when I refresh the page. It doesn't work when you press previous or when you get linked to the page.

In chrome the $(img).width() property returns 0 in both cases when the function doesn't work.

This function performs as expected in IE9 and FF3

What can I do to fix this odd behavior?

Upvotes: 2

Views: 1722

Answers (3)

Mauvis Ledford
Mauvis Ledford

Reputation: 42334

Karmin is correct here. I ran into this problem a few years ago and ended up just not relying on img.load. His workaround for manually triggering the load event should work.

However...

Developers should do max-width or height in CSS in this scenario. In fact, it is good programming practice to do what one can in CSS before doing them in javascript.

Additionally, if one were to keep going with this solution, var width and var height should be placed outside of the if statement next to var maxWidth, and used wherever $(this).width() is called (including the initial check on line 4). Right now the code is unnecessarily creating a new jQuery object to get the height each time when it should have stored and used the value from the first check.

Upvotes: 1

Berry Ligtermoet
Berry Ligtermoet

Reputation: 881

Thanks for the contributions guys. A previous answer given on stack - that I apparently couldn't find this afternoon jQuery && Google Chrome - solved my problem!

$(window).load(function() {
    $(".post-message img.post-image").one("load", function(){
        $(this).each(function() {
            var maxWidth = 200;     
            if($(this).width() > maxWidth)
            {
                var factor = $(this).width() / maxWidth;
                var width = $(this).width();
                var height = $(this).height();
                $(this).css('width', width / factor);
                $(this).css('height', height / factor);
            }   
            console.log($(this).width())    
        });
    }).each(function() {
        if(this.complete) $(this).trigger("load");
    });
});

The code has to be executed on $(window).load() together with the provided code by karim79.

Upvotes: 0

karim79
karim79

Reputation: 342625

Most probably because the images are being pulled up from the browser cache, and the load event is not triggering. The way around this is to manually trigger load if the images's complete properties have been set:

$(".post-message img.post-image").one("load", function(){
    $(this).each(function() {
        var maxWidth = 200;     
        if($(this).width() > maxWidth)
        {
            var factor = $(this).width() / maxWidth;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css('width', width / factor);
            $(this).css('height', height / factor);
        }       
    });
}).each(function() {
    if(this.complete) $(this).trigger("load");
});

Upvotes: 1

Related Questions