Ленивая загрузка — обновление/обновление в сочетании с фильтрацией javascript

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

Основное портфолио сайта содержит большой список изображений, которые можно фильтровать с помощью javascript-библиотеки Isotope.

Ленивая загрузка работает нормально, когда фильтрация не используется, однако, если страница загружается, а я не прокручиваю, но фильтрация используется, отображаемые элементы не разрешаются. Я обнаружил, что некоторые изображения работали, но большинство — нет. Любые предложения о том, как это исправить?

Предположительно, мне нужно сделать что-то, что повторно запустит ленивую загрузку, чтобы обновить или перепроверить себя?

Вот галерея, которую я пытаюсь заставить работать, где вы можете увидеть проблемы, с которыми я сталкиваюсь: http://www.imageworkshop.com/lazyload-portfolio/

Кто-нибудь может помочь?


lazy-loading filtering jquery-isotope
person Gearu    schedule 08.11.2012    source источник
comment
Можете ли вы воспроизвести свою проблему на странице и связать ее? И из того, что я извлек из этого, так это то, что при фильтрации ленивая загрузка отлично работает, когда вы запускаете ее, прокручивая страницу. Но исходные картинки, которые отображаются вверху страницы, не загружаются. Я прав?   -  person Zack    schedule 08.11.2012
comment
Привет, Зак. Ссылка выше: imageworkshop.com/lazyload-portfolio. отложенная загрузка работает нормально, когда страница загружается впервые, но если вы нажмете на параметры фильтра, чтобы просмотреть «ограниченный» список, некоторые изображения не разрешаются.   -  person Gearu    schedule 08.11.2012

Ответы (2)


arrow_upward
3
arrow_downward

вызовите этот код на отфильтрованном элементе: $(window).trigger('scroll');

person Nuri Akman    schedule 03.01.2013
comment
можете ли вы уточнить, где в моем коде я должен поместить это утверждение? - person Gearu; 03.01.2013
comment
Я думаю, что в этом посте есть несколько хороших ответов, но я все еще пытаюсь понять, как заставить его работать на меня. ссылка - person Gearu; 08.01.2013
comment
В моем проекте некоторые изображения в скрытом div не загружаются, когда я показываю этот div. Потому что ленивая загрузка не вызывается. По умолчанию ленивая загрузка подключается к прокрутке страницы. Итак, я добавил этот код после этой строки: $('#MyHiddenDiv').show(); - person Nuri Akman; 12.01.2013
comment
Кстати, я не вижу проблем на вашем сайте. - person Nuri Akman; 12.01.2013
comment
Я использовал решение ниже, чтобы это произошло. единственная проблема, которая у меня все еще есть, заключается в том, что после фильтрации изображения теперь не загружаются, пока я не прокручиваю. Нужно попытаться вызвать начальное обновление после фильтрации. - person Gearu; 14.01.2013

arrow_upward
0
arrow_downward

Я нашел этот ответ от acarabott - https://stackoverflow.com/a/13919010/735369 я реализовал это и это сработало. Единственная проблема заключается в том, что обновление не происходит до тех пор, пока не произойдет действие прокрутки.

Если вы хотите использовать функции сортировки/фильтрации изотопов, вам нужно будет установить failure_limit для lazyload и инициировать событие с обратным вызовом isotope onLayout.

jQuery(document).ready(function($) {
var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

  $con.isotope({
     onLayout: function() {
        $win.trigger("scroll");
     }
});

$imgs.lazyload({
    failure_limit: Math.max($imgs.length - 1, 0)
 });

Объяснение

Согласно документам ( http://www.appelsiini.net/projects/lazyload )

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

В списке, отсортированном/отфильтрованном по изотопам, порядок страниц, безусловно, отличается от HTML, поэтому нам нужно изменить наш failure_limit.

Как видите, мы сохраняем объект jQuery, чтобы использовать его длину 1 в качестве нашего failure_limit. Если вам интересно, почему это длина-1, это из-за следующей проверки в методе обновления lazyload.

 if (++counter > settings.failure_limit) {
    return false;
 }

Ленивая загрузка других событий

Если вы не запускаете ленивую загрузку при прокрутке, вам нужно будет поменять триггер «прокрутки» на любое используемое вами событие. Демо

http://jsfiddle.net/arthurc/ZnEhn/

person Gearu    schedule 10.01.2013