JS code behaves differently when uploaded?

Fenster

Hey, I'm working on a small gallery and lightbox project, and I've hit on some bizarre behaviour in Google Chrome 33.0.1750.152. In short, the JavaScript (through jQuery) to resize images works perfectly fine when run locally, but results in erratic, giant, and inexplicable image sizes when I run the code from my server.

The code, in conjunction with the CSS, is supposed to:

1. Resize each image in a gallery row to the same height.
2. Proportionally resize each row to fix in the gallery width.
3. Slightly shrink (1-2px) the final image in each row in order to make them even, owing to unavoidable rounding errors.

The code works. I've tested it locally, off my hard disk, in the current versions of Chrome, Safari, IE, Firefox, and Opera.

When uploaded to my server, the code works, except in Google Chrome. I am admittedly very new to JS/jQuery coding, and I'm stumped.

Current live version of the gallery:
http://peppermint.bhalash.com/funcan/gallery.html

JavaScript code on GitHub:
https://github.com/bhalash/Funcan/blob/master/uber-gallery/gallery.js

Function in question:

function changeObjHeight(obj, amount) {
    // Change obj height to amount.
    $(obj).css('height', amount + 'px');
}

function orderRowImages(obj) {
    // Resizes each row of images such as to evenly space their width and height 
    $(obj).children('.' + row).each(function () {
        var sum = getRowWidth(this);
        var ratio = parseFloat($(obj).width() / sum);

        $(this).children('img').each(function () {
            var newHeight = Math.round($(this).height() * ratio);
            changeObjHeight(this, newHeight);
            console.log('img resized @ ' + $.now() + '\nw:' + $(this).width() + 'px h:' + $(this).height() + 'px');
        });

        // Rounding errors leave a small margin on the right side of the gallery
        // Each row should ideally be (parent.width() - 1px).
        // Otherwise each row will be 1-2px too width, which causes wrapping.
        var diff = getRowWidth(this) - ($(obj).width() - 1);
        // Resize the last image in line to make it all fit.
        // A smaller row is made slightly larger and vice versa.
        $(this).children('img:last-child').css(
            'width',
            $(this).children('img:last-child').width() - diff + 'px'
        );
    });
}

.uber-gallery {
    margin: 0 auto;
    margin-bottom: 6px;
    margin-top: 6px;
    width: 99%;
}

.uber-row {
    margin-bottom: 6px;
    overflow: auto;
}

.uber-row img {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 100px;
    padding: 0 3px 0 3px;
    width: auto;
}

.uber-row img:first-child {
    padding-left: 0;
}

.uber-row img:last-child {
    padding-right: 0;
}

When offline, it resizes correctly:

img resized @ 1396509601026
w:162px h:162px
img resized @ 1396509601030
w:162px h:162px
img resized @ 1396509601032
w:162px h:162px
img resized @ 1396509601034
w:162px h:162px 

When online, size seems arbitrary:

img resized @ 1396509638460
w:0px h:3529px
img resized @ 1396509638468
w:0px h:3529px
img resized @ 1396509638469
w:0px h:3529px
img resized @ 1396509638472
w:0px h:3529px
img resized @ 1396509638474
w:0px h:3529px
img resized @ 1396509638480
w:0px h:4706px
img resized @ 1396509638482
w:0px h:4706px
img resized @ 1396509638483
w:0px h:4706px

colm_c

It looks like your images aren't loaded fully when you run the script the first time. When you resize the page it works fine.

This would explain also why it's working locally (very fast) vs not working on your server (some lag).

You may need to have an 'onload' event for the images to trigger an update.

Fenster

That could be it, thank you. I'll give this a shot.

Fenster

Marked as solved. Changed loop execution to $(window).load, and the problem went away. Cheers again sir!