Vanilla-lazyload: Readme inaccurate?

Created on 13 Jul 2020 · 11Comments · Source: verlok/vanilla-lazyload

Describe the bug
I was trying to follow the readme. I created the image as in the example:

<img alt="A lazy image" data-src="lazy.jpg" />

and added the JS:

var lazyLoadInstance = new LazyLoad({
  // Your custom settings go here
});

None of the images ever loaded. I also had to add class="lazy" to my <img>, and then it worked.

Expected behavior
Readme matches the usage

LazyLoad version
Please report which version of LazyLoad you're using.

Version 17.1.0

Desktop (please complete the following information):

Ubuntu 18.04
Firefox
78.0.1

Additional context
There were some other things in the readme that were unclear to me. In the scrolling panels example, why does both the class and the ID need to be set?

<div class="scrollingPanel" id="scrollingPanel">

Also, it doesn't seem to cover how to setup lazyload in this scenario:

<div class="scrollingPanel">
  <div>
    <!-- Set of images -->
  </div>
</div>

Doing Documentation

Source

medakk

All 11 comments

Thanks for your feedback. I'll fix the issue as soon as possible.

verlok on 13 Jul 2020

👍1

I’ve just fixed the missing classes part.

I’m unable to fix the rest of the issue now, I’ll do it later.

verlok on 15 Jul 2020

👍1

There were some other things in the readme that were unclear to me. In the scrolling panels example, why does both the class and the ID need to be set?
<div class="scrollingPanel" id="scrollingPanel">

That's like that because I would use the class to style the scrolling panel, and the ID to quickly query the element from the DOM. It's true that I could have use querySelector(".scrollingPanel"), but in the following example, where there are 2 scrolling panels, I do the following:

HTML

<div id="scrollingPanel1" class="scrollingPanel">
  <!-- Set of images -->
</div>
<div id="scrollingPanel2" class="scrollingPanel">
  <!-- Set of images -->
</div>

Javascript

var myLazyLoad1 = new LazyLoad({
  container: document.getElementById("scrollingPanel1")
});
var myLazyLoad2 = new LazyLoad({
  container: document.getElementById("scrollingPanel2")
});

So in the first example it is like that for coherence.

verlok on 20 Jul 2020

❤1

Anyway I get this can be confusing and I'll change that 😄

verlok on 20 Jul 2020

❤1

Also, it doesn't seem to cover how to setup lazyload in this scenario:
<div class="scrollingPanel">
  <div>
    
  </div>
</div>

Now it should do.

verlok on 20 Jul 2020

❤1

Hi, sorry for necro-ing, I'm still not able to get it working in this case:

<div class="lazyContainer">
  <div>
    <!-- Set of images -->
  </div>
</div>

    var lazyLoadInstance = new LazyLoad({
      container: document.querySelector('.lazyContainer')
    });

it doesn't seem to be picking up on the images. also, some of my images maybe nested much more deeply like div > div > div > img.

medakk on 12 Oct 2020

What are your JS options, @medakk?
And what is your CSS for the container?

verlok on 12 Oct 2020

Here's a minimal example demonstrating my scenario: https://codepen.io/medakk/pen/ExyjpKq

HTML is:

<html>

  <body>
    <div class="lazyContainer">
      <div>
        <img data-src="https://picsum.photos/200/300">
      </div>
      <div>
        <img data-src="https://picsum.photos/200/300">
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
  </body>
</html>

var lazyLoadInstance = new LazyLoad({
    container: document.querySelector('.lazyContainer')
});

But I think I see the problem now. I need to have class="lazy" in all my <img> tags. Is this correct?
I thought I could mark the outer div with a class and the library would lazy-load ANY image inside.

Just FYI, the intersection-observer CDN url in the README is not the minified version

medakk on 12 Oct 2020

The scrolling_container property need to be used only if the container is a scrolling one, meaning if it has an overflow: scroll property applied. So if it's not a scrolling container, you can safely remote those lines of JS.

And yes, you need to either: pass an elements_selector property to tell lazy load that images to load lazily, or use the default property value which is .lazy, so ultimately apply a lazy class to your lazy images in the HTML.

verlok on 12 Oct 2020

👍1

Thanks! For anyone else who stumbles upon this, I finally ended up using:

<html>

  <body>
    <div id="lazyContainer">
      <div>
        <img data-src="https://picsum.photos/200/300">
      </div>
      <div>
        <img data-src="https://picsum.photos/200/300">
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
  </body>
</html>

var lazyLoadInstance = new LazyLoad({
  elements_selector: '#lazyContainer img'
});

medakk on 12 Oct 2020

Doh, thanks for catching that. Editing my previous post to get rid of video

On Mon, Oct 12, 2020 at 4:42 AM Andrea Verlicchi notifications@github.com
wrote:

So you mean to lazy load all of the videos in your website?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/verlok/vanilla-lazyload/issues/472#issuecomment-707041133,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACQMOKMLVM665HFODBJGGP3SKLMR3ANCNFSM4OYGF3DQ
.

--
Karthik Karanth

medakk on 12 Oct 2020

Was this page helpful?

0 / 5 - 0 ratings