jquery. Ленивый не загружает все изображения на прокрутке - PullRequest
Новая
       14

jquery. Ленивый не загружает все изображения на прокрутке

0 голосов
/ 02 марта 2019

Я использую Ленивый с группами из многих (> 200) изображений.HTML-код для изображений создается после вызова многих асинхронных функций (обещание активируется, когда все готово).

Кажется, что работает Lazy, первые изображения загружаются при прокрутке, но иногда только изображения доопределенное число загружено, следующие остаются без загрузки.

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

Это происходит как в Chrome, так и в Firefox.

popup

Видимо, количество загружаемых изображений связано со значением параметра threshold Lazy.

Вызов My Lazy: 

$(function() {
    $(selector).Lazy(
        {
            autoDestroy: true,
            chainable: false,
            threshold: 20
        }
    );
});

Код одного изображения, созданного Lazy, но не загруженного: 

<div id="popup-img-_f-diocesi-eventi_giun-ingresso_giun_virgo_potens_2019--ingresso_giun_virgo_potens_2019-02-23-17_00_05_jpg_1556911864" class="thumb-and-caption-container popup-img-00444311103666667-000885614966666667" style="width: 250px; margin-right: 7.5px; margin-bottom: 7.5px;">
  <div class="thumb-container" style="width: 250px; height: 250px;">
    <span class="helper"></span>
    <img title="albums/Diocesi/Eventi Giun/Ingresso Giun Virgo Potens 2019/Ingresso Giun Virgo Potens 2019-02-23--17.00.05.jpg" alt="Ingresso Giun Virgo Potens 2019-02-23--17.00.05" data-src="cache/08/1/diocesi-eventi_giun-ingresso_giun_virgo_potens_2019-ingresso_giun_virgo_potens_2019-02-23-17.00.05.jpg-250ts.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="lazyload-popup-media thumbnail" height="250" width="250" mediahash="#!/_f-diocesi-eventi_giun-ingresso_giun_virgo_potens_2019/ingresso_giun_virgo_potens_2019-02-23-17.00.05.jpg" style="width: 250px; height: 250px;">
  </div>
  <div class="media-caption">Ingresso</div>
</div>

атрибут src остается со значением по умолчанию для Lazy 1px x 1px gif.

В консоли не отображается сообщение об ошибке.

Странно то, что дважды нажать клавишу f12, то есть открыть и закрыть устройствоИнструменты eloper, изображения загружаются.

Я не могу создать jsfiddle, но могу показать проблему:

  • нажмите здесь
  • затем нажмите на значок положения в верхней строке (откроется карта)
  • , затем нажмите на маркер 243

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

1 Ответ

0 голосов
/ 02 марта 2019

Вы должны добавить appendScroll к вашему вызову Lazy, как объяснено в этом примере: Элементы внутри контейнера .

Так что добавьте appendScroll: $('#popup-images-wrapper') в вашу конфигурацию - или что угодноселектор вашего поля прокрутки.

Дело в том, что по умолчанию Lazy прослушивает событие прокрутки window, но в вашем случае ничего не прокручивается на window, поскольку вы находитесь на полноэкранной карте.Поэтому вы должны указать, какой элемент Lazy должен прослушивать события прокрутки.

...