Hi @callmecavs, are you planning to support responsive image attributes like srcset/sizes or the picture element? This would be a great addition in responsive websites.

Thanks anyway for the great work you put into layzr.js!

1. The threshold doesn't work equally when scrolling up or down.
2. Images that are already visible on the page on load don't show until scrolling starts

I'm not sure how you intended people to set the threshold, but I found that if I want the image to load after part of the image is revealed, I have to set a ridiculously high negative integer (ie. -800).

It works great as you scroll down, but if you are scrolling up (which can be achieved by scrolling down then refreshing the page) the image doesn't load until wayyyy later compared to scrolling down.

In addition, I have images that are almost completely visible on page load, yet Layzr doesn't fire for them until I start scrolling.

Ideally:

1. any images that are already visible on the page (above the fold) should load when the script is initiated
2. threshold should a) be more clearly defined (what values are we expected to use here?) and should work equally going up or down (ie. if it's 100px delay on the way down, it should only be 100px delay on the way up).

Hi,

Do you think it's possible to make layzr.js asynchronous?

Something like :

<script async src="js/layzr.min.js"></script>
<script async src="js/instantiate.js"></script>

It's not working for me and I think the error is with the initiation.

document.addEventListener('DOMContentLoaded', event => {
...
});

What do you think?

Hey @callmecavs,

It appears that images wrapped in an hidden container will still be loaded. Could you tell me in which context does it make sense? I think most people don't want to be happening, do they?

You can see an example here: http://inquiry.n2clic.com/

If what I'm saying does make sense, perhaps you should check if the placeholder image is visible:

//Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

If it doesn't, please lemme know if there's a work around.

Cheers

document.addEventListener('DOMContentLoaded', this._create.bind(this), false); does not fire off when layzr is used with requirejs. Checking for readyState is complete seems to fix this:

    if (document.readyState === "complete") {
      this._create();
    } else {
      // call to create
      document.addEventListener('DOMContentLoaded', this._create.bind(this), false);
    }

First: thanks for this, looks great!

I was wondering, however, if you've considered supporting Responsive images through e.g. the srcset and sizes attributes? (For a nice explainer check: https://ericportis.com/posts/2014/srcset-sizes/)

At the moment you 'force' retina img src by checking window.devicePixelRatio > 1. However, there's a lot of alternative use-cases for 'responsive' images and by forcing the src through JS you disable browser optimizations.

I am not sure how this would work—if it would work at all (since I'm not sure we can set srcset and sizes dynamically)—but you might have some thoughts?

I like how this doesn't require any dependencies!! I also like how performant it is, along with the small file file size, great work! I have a few suggestions to improve performance, extend functionality, and (potentially) decrease file size.

1. Remove elements from this._nodes after they have been revealed because you no longer need to check if they're in the viewport in update.

2. Currently the _destroy method is not being used at all. This should run when this._nodes.length is 0. So you can remove the overhead of those events.

3. Instead of defining this._nodes in the constructor I would move it to _create and just add an argument to _create(selector). If selector is undefined then just use the initial selector that was passed into the options. This way you can call Lazyr._create in some other function after the page loads and add other elements to this._nodes list. This would be useful if you ajaxed in images that weren't on the page when Lazyr was initially called. I would also update the name to be something else to be more semantic if you decide to implement it like this.

4. In addition to #3 update document.querySelectorAll(this._optionsSelector) to be this._optionsContainer.querySelectorAll(selector || this._optionsSelector) so that you're only getting elements inside of the defined container.

5. Remove this updateSelector because it's not being used and just adding weight to the file size.

6. Remove getContainerHeight from _inViewport and just set this.containerHeight = this._optionsContainer.innerHeight || this._optionsContainer.offsetHeight inside of update outside of the loop. The reason for this is so that you don't have to get the container height for every node in this._nodes since it's highly unlikely that the container height will change before the update function is complete.

7. Move the hidden attribute check into the update for loop. This way you don't have to waste time doing the calculations to check if it's visible if it's hidden.

   if(!node.hasAttribute(this._optionsAttrHidden) && this._inViewport(node)) {
   ...
   }
   

   Those are my 2 cents.

I have no idea which version I installed last time. All I know is that bower found and downloaded version 1.2.2.

It would be awesome if the version number could be inserted as a comment on the first line of the dist/layzr.min.js.

Autocompeter does this using gulp-header.

As mentioned in the end of the readme, it would be great to have this hosted on a CDN. I suggest both CDNJS and JsDeliver:

• https://github.com/cdnjs/cdnjs#adding-a-new-or-updating-an-existing-library
• https://github.com/jsdelivr/jsdelivr#how-to-submit-or-update-projects

Cheers

I am using a Bootstrap Carousel trying to lazy load its images, and I noticed (in the network tab) that images are loaded very early. Now, I don't mind that much, as my main goal is the make initial rendering faster and cut down on http requests but I would like if I can control this a bit more.

I am assuming something is wrongly calculated with the current scroll position / threshold? Maybe the fact that only 1 image is visible after the Carousel script is initialized?

Here's the pen showing the problem/behavior: https://codepen.io/gkatsanos/pen/dWXNEj

I'm having an issue with srcset in safari. Layzr loads and is executed but for images with data-srcset it wipes out all references to images and leaves the node blank.

Browser Version : Safari Version 9.1.1 (11601.6.17), same happens on iOS Safari Latest version. Browser Console : Empty, when I console log the elements that the lazyr events are being fired on I get the following results

https://www.dropbox.com/s/23r5e9nler8kspt/Screenshot%202016-06-10%2018.37.59.png?dl=0

Relevant HTML/JS

Source

<figure class="content__image">
<img data-normal="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWideMobile/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013" data-srcset="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWide/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013 870w" width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45" />
</figure>

Expected outcome

<figure class="content__image">
<img src="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWideMobile/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013" srcset="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWide/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013 870w" width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45" />
</figure>

Actual Outcome

<figure class="content__image">
<img width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45" />
</figure>

https://www.dropbox.com/s/nxuquubek4a95d1/Screenshot%202016-06-10%2018.40.53.png?dl=0

There are a few workarounds but none that are perfect.

• Disable lazyr
• Use data-normal on its own instead of data-srcset too
• Use data-retina instead of data-srcset

Please place this in the front page readme, so beginners can spot it easy. This's useful piece of code to see when starting especially for beginner developer. Nice repo!

@MarkOGDev per the Setup Images and Example Code sections of the docs, the simplest possible configuration would look as follows:

<!DOCTYPE html>

<html>
  <head></head>
  <body>
    <!-- setup images, only the data-normal attribute is required -->
    <img data-normal="normal.jpg">

    <!-- optionally include data-retina and data-srcset attributes -->
    <img data-normal="normal.jpg"
         data-retina="retina.jpg"
         data-srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1024w">

    <!-- load Layzr -->
    <script src="layzr.min.js"></script>

    <!-- start up Layzr -->
    <script>
      const instance = Layzr();
      document.addEventListener('DOMContentLoaded', function(event) {
        instance
          .update()           // track initial elements
          .check()            // check initial elements
          .handlers(true)     // bind scroll and resize handlers
      })
    </script>
  </body>
</html>

please don't hesitate to reach out with any more questions!

Originally posted by @callmecavs in https://github.com/callmecavs/layzr.js/issues/56#issuecomment-174575197

Hello, I try to lazy-load my images witch are hosted on contentful, I installed layzr, but when I run my application, all I have is my default image displayed, Do you know why ? In my html, I can see that the date-image is the right url but the attribute src is not any idea how can I fix that ? Damien.

Some browsers now support a loading attribute on images and iframes. A recent article on Smashing details how lazy loading scripts can be modified to first check for native support for lazy loading before triggering JavaScript based solutions.

What are your thoughts on adding a parameter (something like prefer_native) that would check if native lazy loading is supported, and only run Layzr if it's not supported?

https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/

Do you have any plans to support the IntersectionObserver API? It is supposed to be more performant than Element.getBoundingClientRect() and is becoming widely supported.

Hi, dear

This PR stops loading img which is not displayed ( display:none ). The function getBoundingClientRect, which is used in inViewport can't take correct position when the node is in invisible element, can it? So I added a check in inViewport to know whether it's displayed. Please tell me if I did anything wrong. Thanks.

best regards,

This PR fixes a problem I currently have. Simply, I have a div on my page which is overflow: auto. Inside this div, I have a bunch of images that I want to lazy-load with Layzr. The issue is that Layzr's handlers method only operates on window. This means that only scrolling the window itself will trigger lazy-loading, and scrolling any other element won't. I propose the addition of handlersFor which will add the scroll handler for the given node.

Note: I looked into detecting resizing of a div (though, it's not a problem I have). It seems that this is a popular solution, and very efficient. However, it would introduce a dependency for an edge case which is probably rare. Having said that, maybe we should expose requestFrame (perhaps under a different name) as a hook for adding other triggers?