imagesLoaded（砌体）和IE不兼容性

我正在使用Masonry进行项目并相应地应用了图像加载。imagesLoaded（砌体）和IE不兼容性

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

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

这里是我发现：

如果你打开一个新标签，并直接输入网址 - > imagesLoaded 工作
如果碰到刷新 - > imagesLoaded工作
如果键入在URL中点击刷新，标记地址栏中的文字并按下Enter - > imagesLoaded failed
如果上述操作重复随控台打开 - > imagesLoaded工作
A nd有时它不起作用，如果它感觉像...

这里的交易是什么？这只发生在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/

来源

2014-07-13 Georgi Demirev

我有排水沟和下边距一个与之相似的麻烦;

我不知道什么问题是确切的，但在我的情况下，我的问题是填充。我试图用砖石制作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" 
});

错误消失了！我希望这对你有所帮助，对于我可怜的英语感到抱歉。

来源

2014-08-18 19:17:06 huckebein

imagesLoaded（砌体）和IE不兼容性

回答

相关问题