Vanilla-lazyload: Images not loading when scrolling container appears

[weavermedia]

Bug - initial images not loading when the scrolling container appears on the screen

• What is happening?
  I'm using LazyLoad inside an Uploadcare widget to defer loading of a grid of images.
• What is the expected behaviour?
  I expect the images in the visible portion of the scrolling container to load immediately.
• Which version of LazyLoad are you using?
  8.7.1
• In which browser(s) and browser version(s) are you experiencing the problem?
  Chrome 66
• Could you provide the HTML, CSS and JS code you use for your images?
  https://s.codepen.io/weavermedia/debug/eraYGK/bZAQWNLBoWoM
• What are the steps to reproduce the problem?
  Click the 'Choose a file' button and see that the images in the visible portion of the scrolling container don't load. If you scroll a tiny amount they load immediately. Further scrolling loads as expected.

[verlok]

Hi @weavermedia. I’m not in the condition to check your code on code pen right now (and your debug view expired).
Question: have you set the scrolling container in the container option of the LazyLoad instance?

[verlok]

Could you please copy and paste the code in a comment here?
You can use the triple ` to format the code blocks.

[weavermedia]

Yep, I set the container in options. It's working when I scroll the container, just not when it first loads.

HTML:

<input type="hidden" role="uploadcare-uploader" name="my_file" />
<script src="https://ucarecdn.com/libs/widget/3.3.0/uploadcare.full.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.1/lazyload.min.js"></script>

CSS:

.uploadcare--tab_name_robots {
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

JS:

UPLOADCARE_PUBLIC_KEY = "demopublickey";
UPLOADCARE_TABS = 'robots';
var robo_url, img_tag;

function robots(container, button, dialogApi, settings) {
  button[0].title = "Robots";
  var count = 500;
  while (count--) {
    robo_url = `https://robohash.org/${count}.png`;
    img_tag = `<img width=200 height=200 data-src='${robo_url}'>`;
    container.append(img_tag);
  };

  var myLazyLoad = new LazyLoad({
    container: container[0]
  });
  console.log(myLazyLoad); // shows the correct container and elements
  // myLazyLoad.update(); // tried this but seems to have no effect
}

uploadcare.registerTab('robots', robots);

[verlok]

Thanks for that.
Could you post here the working URL of the codepen you had created?

[weavermedia]

https://codepen.io/weavermedia/pen/eraYGK 👍

[verlok]

Thanks. Working on that right now.

[verlok]

The reason for your code is not working properly is that the uploadcare layer is shown AFTER the LazyLoad instance is created. So when it loops through elements to show, it doesn't find any.

First, very ugly solution that came to my mind and works: instantiate the LazyLoad after the uploadcare execution stack has finished. You can use a setTimeout function with 1 ms delay to do so.

setTimeout(function() {
    var myLazyLoad = new LazyLoad({
      container: container[0]
    });
    console.log(myLazyLoad);
  }, 1);

Codepen here https://codepen.io/verlok/pen/xzKyKo?editors=1010

[verlok]

The more honest, cleaner way to do it would be to use the uploadcare Javascript API to create the LazyLoad object once the dialog is open and visible. But sincerly I've spent the last half an hour reading the uploadcare's dialog panel documentation and still didn't find a solution.
I'm sure it's there somewhere though. Maybe you know this better than me.

[verlok]

And this is how you do it properly using uploadcare's API
https://codepen.io/verlok/pen/NzWNvy?editors=1010

So long and thank you for all the fish.

[weavermedia]

Fantastic! Thanks for the updated pen. Working great now 🎉