0

I'm using Masonry for a project and applying imagesLoaded accordingly.

After many, many tests I figured out these two work almost perfectly together, but sometimes they'd fail. And 99% of the cases it's imagesLoaded's fault.

However it seems that on Internet Explorer imagesLoaded fails to load a lot more than in any other browser.

Here's what I've found:

  • If you open a new tab and enter the URL directly -> imagesLoaded works
  • If you hit refresh -> imagesLoaded works
  • If you type in the URL, hit refresh, mark the text in the address bar and press Enter -> imagesLoaded fails
  • If the above actions are repeated with the console open -> imagesLoaded works
  • And sometimes it doesn't work if it feels like it...

What's the deal here? This only occurs in Internet Explorer (11, 10, 9, etc.).

Here's the JS:

function masonryOptions(){
    $('.post-wrapper').width((((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%');
    $(window).resize(function() {
        $('.post-wrapper').width((((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%');
    });
    container.imagesLoaded(function(){
        $('iframe').load(function() {
            container.masonry({
                itemSelector: '.post-wrapper',
                gutter: gutter,
                transitionDuration: 0
            });
        });
    });
}
$(document).ready(function(){
    masonryOptions();
});

And a demo page: http://lorem-blogsum.tumblr.com/

Georgi Demirev
  • 446
  • 3
  • 22

1 Answers1

0

I have a similary trouble with gutter and margin-bottom;

I don't knwo what problems is exactly, but in my case my problem is padding. I tried to make 2-columns item with masonry.

.item {
   padding: 10px 10px 10px 10px;
   margin-bottom: 10px;
   width: 48%;
}

.gutter {
   width: 4%;
 }

 <div id="id_list">
     <div class="item">
         ...
     </div>
     <div class="item">
         ...
     </div>
 </div>

 $("#id_list").masonry({
     gutter: ".gutter",
     itemSelector: "div.item"
 });

It was buggy in IE. So, I changed my code.

.item {
    margin-bottom: 10px;
    width: 48%;
}

.gutter {
    width: 4%;
}

<div id="id_list">
    <div style="padding: 10px 10px 10px 10px">
        <div class="item">
            ...
         </div>
         <div class="item">
            ...
         </div>
    </div>
</div>

$("#id_list").masonry({
    gutter: ".gutter",
    itemSelector: "div.item"
});

And bug is disappeared! I hope it is helpful for you and I'm sorry for my poor english.

huckebein
  • 21
  • 3