Каменная кладка, ленивая загрузка и поле галереи ACF

Я использую поле галереи ACF для добавления изображений в пользовательский тип сообщения. Проблема в том, что в случае с одним постом я добавил около 80 изображений, а это значит, что все они должны загрузиться до запуска Masonry. Я думал, что буду использовать отложенную загрузку для загрузки изображений при прокрутке страницы вниз, но для этого вам нужно знать размеры изображения. Я нашел это https://github.com/okadots/masonry-wp-lazy-load но оказывается, что это не очень безопасно.

У кого-нибудь есть другие идеи?


lazy-loading advanced-custom-fields masonry
person SpyLefkaditis    schedule 07.07.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать что-то вроде imagesLoaded (созданный создателем Masonry), чтобы убедиться, что все изображения загружаются до запуск масонства.

imagesLoaded в документации Masonry: http://masonry.desandro.com/appendix.html#imagesloaded

person corygibbons    schedule 23.07.2014

arrow_upward
0
arrow_downward

Вы можете использовать подключаемый модуль imagesLoaded, который можно найти здесь: http://imagesloaded.desandro.com/, затем каждый раз изображение загружается, вы можете обновить макет сетки, это будет выглядеть так:

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

каждый раз, когда вы добавляете новые элементы в сетку, возможно, через AJAX, вам нужно будет выполнять строки, в которых вы размещаете кладку

если у вас возникли трудности с этим, вы можете использовать готовый плагин, например этот: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 с этим плагином у вас может быть ленивая загрузка, вы указываете только URL-адреса ваших изображений и плагин сделает все остальное, вы можете указать, сколько изображений вы хотите загрузить в каждом наборе

person Magnus    schedule 31.05.2017