Как совместить кладовую и фундаментную развязку

Question

Я использую кладки для компоновки своих изображений и замены фундамента для загрузки изображения различного размера в зависимости от размера экрана. (маленький, средний, большой). Моя проблема заключается в том, что, поскольку изображения загружаются с помощью JavaScript с использованием плагина imagesLoaded, похоже, не работает. Я также попытался использовать 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

Я хотел бы, чтобы исправить мой ответ выше с более пром моего передовой подход. Я использовал события обмена, чтобы вызвать функцию обратного вызова, которая находится в сетке масонства. Это хорошо работает и не дает мне никаких проблем.

Вот событие, как указано в документации:

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

Так просто создать функцию Init кладки сетки, и вызвать его из в пределах указанного выше кода.

Answer 2

Вы можете использовать Interchange, чтобы загрузить партиалы в вашу страницу. Итак, для небольшого экрана загрузите частичный с небольшими изображениями, а также с кладкой и его поддерживающим кодом. Таким образом, ваши изображения не будут загружаться через js, а изображения должны быть в состоянии их видеть.

В странице:

<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> 

Etc.