function doesn't execute on jquery document ready

Question

I have a javascript function that resize and centers images based on the surrounding container size (that in turn depend on the window size). I use jquery as js framework. The function need to be executed after document load (on document ready) but also when and if the user changes size of the browser, ie I have the following running in the html-document:

$(document).ready(function(){
   fixImageSizes();
});

$(window).resize(function() {
   fixImageSizes();
});

But for some unknown reason the function is only executed when a user resizes the browser and not after loading. Can anyone please help with this?

(my function is below for knowledge...)

function fixImageSizes()
{
var cw = $('#imagecontainer').width();
var ch = $('#imagecontainer').height();
$('#imagecontainer img').each(function()
{
    var iw = $(this).css('width');
    var ih = $(this).css('height');
    if (parseInt(iw) < parseInt(cw)) // image width < viewport
    {
        var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
        var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
        var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
        $(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
    }
    if (parseInt(ih) < parseInt(ch)) // image height < viewport
    {
        var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
        var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
        var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
        $(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
    }
    if (parseInt(ih) > parseInt(ch) && parseInt(iw) > parseInt(cw)) // viewport smaller than image, shrink image
    {
        if (parseInt(ch) - parseInt(ih) > parseInt(cw) - parseInt(iw)) // difference is less on height
        {
            var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
            var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
            var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
            $(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
        } 
        else // difference less on width
        {
            var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
            var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
            var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
            $(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
        }
    }

});

Why do you think the function was not executing?

Bergi
– Bergi

2012-08-27 10:46:29 +00:00
Commented Aug 27, 2012 at 10:46 — Bergi
– Bergi, Commented Aug 27, 2012 at 10:46

Guffa · Accepted Answer · 2012-08-27 10:44:42Z

5

You should use the load event instead of the ready event.

The ready event runs after the document has loaded, but before the images has loaded, so you won't have the correct size of all elements.

answered Aug 27, 2012 at 10:44

Guffa

703k112 gold badges760 silver badges1k bronze badges

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

7 Comments

Bergi Over a year ago

+1, although I'm not sure whether that is his problem. He does not get the sizes of the images, but only of their wrapper element - the single <img>s seem to have css width and height

jtheman Over a year ago

@Bergi: Yes I get the image sizes with $('#imagecontainer img').each(function()

Bergi Over a year ago

@jtheman: No, you get the css widths and heights of the images, not their actual sizes.

Guffa Over a year ago

@jtheman: You don't have to use parseInt on the values that you get from the width and height methods as they are already numeric. Consider if you should use those methods to get the size of the images also, rather than getting their CSS settings.

Guffa Over a year ago

@jtheman: Do you set any CSS size on the images in the HTML code? Otherwise the function only works the second time you run it, and then on.

|

David Hellsing · Accepted Answer · 2012-08-27 12:35:32Z

1

The function is probably executing (you can double-check with a simple alert), but the images you are "fixing" is probably not loaded yet. You can use the window.onload event or listen to the image load event like this:

var scale = function() {
    // rescale
};

$('#imagecontainer img').each(function() {
    this.complete ? scale.call(this) : $(this).load(scale);
});

edited Aug 27, 2012 at 12:35

answered Aug 27, 2012 at 10:51

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

2 Comments

Bergi Over a year ago

You should not use arguments.callee, which is not supported in strict mode. Just name the function.

Bergi Over a year ago

You already got the upvote, I just thought a named function expression would be nicer

Dubh · Accepted Answer · 2012-08-27 10:46:12Z

0

Try this:

$(window).load(function (){
    fixImageSizes();
});

answered Aug 27, 2012 at 10:46

Dubh

551 silver badge10 bronze badges

Collectives™ on Stack Overflow

function doesn't execute on jquery document ready

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related