callmecavs/layzr.js

Layzr.js is a JavaScript library that delays image loading on a web page until each image is about to scroll into view. Instead of downloading every image the moment a page opens, the browser waits until the user is close to seeing an image, then fetches it. This reduces how much data loads upfront, which makes the initial page feel faster, particularly on pages with many photos. The setup involves adding special data attributes to your HTML image tags rather than the standard src attribute. You put the image file path in an attribute called data-normal, and optionally add a data-retina path for high-resolution screens or a data-srcset value for responsive images that serve different sizes to different devices. Layzr reads these attributes and picks the most appropriate source for each visitor's browser and screen. Once the library is installed via npm and imported into your JavaScript, you create an instance with one line. You can also pass a threshold option, which controls how far above or below the viewport edge images start loading. A positive threshold causes images to load before they fully scroll into view, which can feel smoother for the reader. The library emits two events: one just before it sets an image source and one just after. These let you attach your own code at each moment, for example to show a loading spinner or log analytics. The API also includes methods to manually trigger a check of which images are in view and to refresh the list of images being tracked, which is useful when new images are added to the page dynamically after it first loads. Layzr supports all major browsers back to Chrome 24, Firefox 23, Safari 6.1, and Internet Explorer 10. The library is released under the MIT license.