CODEWITHSUNDEEP
javascriptjqueryleafletlazy-loading
Paolo Benvenuto
Paolo Benvenuto

Reputation: 417

jquery.Lazy not loading all the images on scroll

I am using Lazy with groups of many (> 200) images. The html code for the images is built after many asyncrounous functions are called (a promise is activated when everything is ready).

Lazy seems to work , the first images are loaded when scrolling, but sometimes only the images till a certain number are loaded, the following ones remain without loading.

This happens particularly in a leaflet popup: only the first lines of images below the visible part are loaded when scrolling, the other are never loaded.

It happens in both chromium and firefox

popup

Apparently the number of images which are loaded is tied to the value of the threshold Lazy parameter.

My Lazy's invocation:

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

The code of one image worked out by Lazy but not loaded:

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

the src attribute remains with the default Lazy's 1px x 1px gif.

No error is shown in the console.

The weird thing it then that, pressing twice f12, i.e. opening and closing the developer tools, the images are loaded.

I cannot make a jsfiddle, but I can show the issue:

A popup with many images is shown, scrolling you see the thumbnail that are not loaded, and you get them loaded hitting twice F12.

Upvotes: 1

Views: 2968

Answers (1)

Sietse Brouwer
Sietse Brouwer

Reputation: 256

You should add an appendScroll to your Lazy invocation, as explained in this example: Elements inside a container.

So add appendScroll: $('#popup-images-wrapper') to your config – or whatever the selector of your scroll box is.

The thing is: by default Lazy listens to the scroll event of window, but in your case nothing scrolls on window, since you are on a fullscreen map. So you have to tell on which element Lazy should listen for scroll events.

Upvotes: 2

Related Questions