Question

我正在使用Masonry进行项目并相应地应用imagesLoaded。

经过多次测试，我发现这两项测试几乎完美地结合在一起，但有时它们会失败。 99％的案例都是图片加载的错误。

然而，似乎在Internet Explorer上，imagesLoaded无法加载比任何其他浏览器更多的内容。

这是我发现的：

如果您打开新标签页并直接输入网址 - ＆gt; imagesLoaded 原理
如果点击刷新 - ＆gt; imagesLoaded works
如果您输入网址，请点击刷新，在地址栏中标记文字，然后按回车键 - ＆gt; imagesLoaded失败
如果在控制台打开的情况下重复上述操作 - > imagesLoaded works
如果有这种感觉，它有时会起作用......

这是什么交易？这仅发生在Internet Explorer（11,10,9等）中。

这是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();
});

以及演示页：http://lorem-blogsum.tumblr.com/

Answer 1

我在排水沟和边缘底部有类似的麻烦;

我不知道究竟是什么问题，但在我的情况下我的问题是填充。我试着用砖石做2列项目。

.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"
 });

这是IE中的错误。所以，我改变了我的代码。

.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"
});

虫子消失了！我希望它对你有帮助，我很抱歉我的英语很差。

imagesLoaded（Masonry）和IE兼容性

1 个答案: