Question

我正在使用砖石来布置我的图像和基础交换，以根据屏幕尺寸加载不同大小的图像。（小，中，大）我的问题是，因为使用imagesLoaded插件通过JavaScript加载图像似乎不起作用。我也尝试过使用setTimeout（），但是砌体根本没用。那么有没有人知道一种方法来检查图像是通过javascript加载完成还是确保砌体是最后运行的绝对脚本？

我正在使用的示例砌体项目

<li class="image masonry-item"><a href="image/url"><img data-interchange="[ {{small/thumb}}, (small)], [ {{medium/thumb}}, (default)], [ {{large/thumb}}, (large)]" ></a></li>

页面底部的

脚本

    <script src="jquery.js"></script> 
    <script src="foundation.min.js"></script>
     <script src="foundation.interchange.js"></script>
    <script src="imagesloaded.pkgd.min.js"></script>
    <script src="masonry.pkgd.js"></script>
    <script> $(document).foundation(); </script>

<script>   
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {


msnry = new Masonry( container, {

            columnWidth :  container.querySelector('.masonry-size'),
            itemSelector:'.masonry-item'} );

}); 
</script>

Answer 1

您可以使用Interchange将部分内容加载到页面中。因此，对于小屏幕，加载部分小图像，加上砖石及其支持代码。这样，您的图像将不会通过js加载，而imagesloaded应该能够看到它们。

在您的信息页中：

<div data-interchange="[../small-image-gallery.html, (small)], [large-image-gallery.html, (large)]"></div>

部分（非确切代码）：

<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">

<script src="imagesloaded.js"></script>
<script src="masonry.js"></script>

等

Answer 2

我想用更直接的方法纠正我上面的答案。我使用Interchange事件触发了一个在Masonry网格中的回调函数。这很好用，没有给我任何问题。

以下是文档中列出的事件：

$(document).on('replace', 'img', function (e, new_path, original_path) {console.log(e.currentTarget, new_path, original_path);});

所以只需创建一个初始化砌体网格的函数，然后在上面的代码中调用它。

如何结合砌体和基础交换

2 个答案: