如何结合砌体和基础互换

Question

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

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

<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 事件来触发初始化 Masonry 网格的回调函数。这很好用，没有给我带来任何问题。

这是文档中列出的事件：

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

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

Answer 2

您可以使用 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>

等等