Freetile gets math wrong on first load

[ms-studio]

I observe strange issues on a site where I am implementing Freetile. Context: a responsive layout, where #freetile-container contains several blocks, most of which have a percentage-set width of 25%, and a few have 50%.

If I load freetile with this:

$('#freetile-container').freetile({ selector: '.archive-block', });

what I see is:

• upon first load, Freetile gets the positions wrong: it looks like it would add about 20px of right margin to every block, which obviously breaks the intended 4-column layout.
• if I trigger a reload of Freetile, by resizing the browser window, or by opening the Firebug inspector, it gets corrected and everything jumps into the right place.

So by having this in my scripts.js file (a double call to Freetile), the end result looks good:

$('#freetile-container').freetile({ selector: '.archive-block', }); $('#freetile-container').freetile({ animate: true, elementDelay: 5, selector: '.archive-block', });

However, I notice that this has a strange side-effect on elements inside the freetile area: their src gets dynamically replaced by a 1x1 white pixel, which looks like src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" in the inspector.

This image replacement doesn't occur when freetile is loaded once, but then I get an incorrect layout. Very mysterious...

[yconst]

freetile does not work well with % layouts. I intend on trying to fix that at some point.

But another issue is the way you're calling freetile: Calling it twice sequentially calls ImagesLoaded two times asynchronously and totally breaks the loading pattern. That;s why you seen the placeholder images in some cases.

[yconst]

See also issue #2

[ms-studio]

Thanks for the hint. It's indeed a duplicate of issue #2.
Also, the workaround proposed by elihorn works fine for me:

$('#freetile-container').freetile().freetile({
selector: '.archive-block',
});