blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.

2,626

356

2,626

View on GitHub View on NPM

Top Related Projects

vanilla-lazyload

7,650

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

lazysizes

17,454

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lozad.js

7,437

🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more

lazyload

8,758

Vanilla JavaScript plugin for lazyloading images

yall.js

1,366

A fast, flexible, and small SEO-friendly lazy loader.

Quick Overview

Blazy is a lightweight, fast, and flexible JavaScript library for lazy loading images and iframes. It supports responsive images, retina displays, and can be easily integrated into various frameworks and content management systems.

Pros

Lightweight and fast, with minimal impact on page load times
Highly customizable with numerous options and callbacks
Supports modern web features like IntersectionObserver for better performance
Works with both images and iframes, making it versatile for different content types

Cons

Requires JavaScript to function, which may not be ideal for all use cases
Documentation could be more comprehensive, especially for advanced use cases
Limited built-in support for specific frameworks or libraries

Code Examples

Basic usage for lazy loading images:

const bLazy = new Blazy({
    selector: 'img.lazy'
});

Lazy loading with custom options:

const bLazy = new Blazy({
    selector: '.lazy',
    offset: 100,
    successClass: 'loaded',
    errorClass: 'error',
    src: 'data-src',
    loadInvisible: true,
    saveViewportOffset: true
});

Using callbacks:

const bLazy = new Blazy({
    selector: '.lazy',
    success: function(element){
        console.log("Element loaded:", element);
    },
    error: function(element, msg){
        console.error("Error loading element:", element, msg);
    }
});

Getting Started

Include the Blazy script in your HTML:

<script src="blazy.min.js"></script>

Add the lazy class and data-src attribute to your images or iframes:

<img class="lazy" src="placeholder.jpg" data-src="image.jpg" alt="Lazy loaded image">

Initialize Blazy in your JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    const bLazy = new Blazy({
        selector: 'img.lazy'
    });
});

This setup will lazy load all images with the lazy class when they enter the viewport.

Competitor Comparisons

vanilla-lazyload

7,650

Pros of vanilla-lazyload

More actively maintained with frequent updates
Supports native lazy loading for modern browsers
Offers more customization options and advanced features

Cons of vanilla-lazyload

Slightly larger file size
May have a steeper learning curve for beginners

Code comparison

vanilla-lazyload:

const lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazy",
  threshold: 0,
  callback_enter: (element) => {
    // Custom logic when element enters viewport
  }
});

blazy:

var bLazy = new Blazy({
  selector: '.lazy',
  offset: 100,
  success: function(element){
    // Custom logic when element is loaded
  }
});

Both libraries offer similar core functionality for lazy loading images and other elements. vanilla-lazyload provides more advanced features and customization options, while blazy focuses on simplicity and ease of use. The choice between the two depends on project requirements and developer preferences.

vanilla-lazyload is better suited for projects that need more control over lazy loading behavior and support for modern browser features. blazy is a good choice for simpler projects or when a lightweight solution is preferred.

lazysizes

17,454

Pros of lazysizes

More feature-rich, offering advanced options like automatic size calculation and LQIP (Low Quality Image Placeholders)
Better browser support, including older versions of Internet Explorer
Larger community and more frequent updates

Cons of lazysizes

Slightly larger file size, which may impact page load times
More complex configuration options, potentially increasing the learning curve
Higher CPU usage due to additional features and calculations

Code Comparison

lazysizes:

<img data-src="image.jpg" class="lazyload" alt="Lazy loaded image">
<script src="lazysizes.min.js" async=""></script>

blazy:

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="image.jpg" alt="Lazy loaded image">
<script src="blazy.min.js"></script>
<script>
    var bLazy = new Blazy();
</script>

Both libraries use similar markup for lazy loading images, with lazysizes utilizing a lazyload class and blazy using a data URI as a placeholder. lazysizes requires less JavaScript initialization, while blazy needs explicit instantiation. Overall, lazysizes offers more features and broader support, while blazy provides a simpler, lightweight alternative for basic lazy loading needs.

lozad.js

7,437

🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more

Pros of lozad.js

Smaller file size (1.9KB vs 2.2KB for blazy)
Uses Intersection Observer API for better performance
Supports more than just images (e.g., iframes, videos)

Cons of lozad.js

Less browser support due to reliance on Intersection Observer API
Fewer customization options compared to blazy
Less extensive documentation and examples

Code Comparison

lozad.js:

const observer = lozad();
observer.observe();

blazy:

var bLazy = new Blazy({
    selector: 'img'
});

Both libraries aim to provide lazy loading functionality, but lozad.js focuses on modern browsers and leverages newer APIs for improved performance. blazy offers more extensive options and broader browser support, making it suitable for projects that need to cater to older browsers.

lozad.js is ideal for projects targeting modern browsers and prioritizing performance, while blazy is better suited for projects requiring broader compatibility and more customization options.

When choosing between the two, consider your target audience, browser support requirements, and specific lazy loading needs. Both libraries are actively maintained and have their strengths, so the best choice depends on your project's specific requirements.

lazyload

8,758

Vanilla JavaScript plugin for lazyloading images

Pros of lazyload

Supports more types of media (images, iframes, videos)
Offers more customization options and callbacks
Has better documentation and examples

Cons of lazyload

Larger file size (11KB vs 2KB for blazy)
More complex setup and configuration
May have slightly higher performance overhead

Code Comparison

lazyload:

lazyload(document.querySelectorAll(".lazyload"), {
    root: null,
    rootMargin: "0px",
    threshold: 0
});

blazy:

var bLazy = new Blazy({
    selector: '.b-lazy'
});

Both libraries use similar approaches for lazy loading, but lazyload offers more configuration options out of the box. blazy's simpler implementation may be preferable for basic use cases, while lazyload provides more flexibility for complex scenarios.

lazyload uses the Intersection Observer API by default, which can improve performance in modern browsers. blazy relies on scroll events but can be extended to use Intersection Observer.

Overall, choose lazyload for more features and customization, or blazy for a lightweight, simple solution.

yall.js

1,366

A fast, flexible, and small SEO-friendly lazy loader.

Pros of yall.js

Supports both images and CSS background images
Offers more customization options and event hooks
Smaller file size (2.1KB vs 2.8KB for Blazy)

Cons of yall.js

Requires more setup and configuration
Less browser support (IE11+ vs IE7+ for Blazy)
Slightly more complex API

Code Comparison

yall.js:

import yall from 'yall-js';

document.addEventListener("DOMContentLoaded", () => {
  yall({
    observeChanges: true,
    threshold: 300
  });
});

Blazy:

var bLazy = new Blazy({
  selector: '.b-lazy',
  offset: 100,
  loadInvisible: false
});

Both libraries aim to provide lazy loading functionality for images, but they differ in their approach and features. yall.js offers more modern features and flexibility, while Blazy focuses on simplicity and broader browser support. The choice between the two depends on specific project requirements, target audience, and desired customization level.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

#hey, be lazy

bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). Itâs written in pure JavaScript why it doesnât depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page.

Table of Contents

DEMO

http://dinbror.dk/blazy/

More examples: http://dinbror.dk/blazy/examples/

Codepen playground: http://codepen.io/dinbror/pen/HzCAJ

USAGE & API

http://dinbror.dk/blog/blazy/

INSTALL

You can install blazy.js with npm:

npm install blazy --save

or bower:

bower install blazy --save

CDN

If you don't want to host the script yourself you can link to the latest minified file:
//cdn.jsdelivr.net/blazy/latest/blazy.min.js on jsDelivr. Exchange latest with the specific version number if you want to lock it in.

WHY BE LAZY?

bLazy is used on big sites with millions of monthly visitors so it has been tested out in the real world.
bLazy is written in pure JavaScript why it doesnât depend on 3rd-party libraries such as jQuery.
bLazy is lightweight, less than 1.4KB and less than 1.25KB if you don't need IE7- support.
bLazy is very fast. It has focus on performance why it also auto-destroys when it's done lazy loading.
bLazy can lazy load all types of images including background images.
bLazy is future-proof. It supports srcset and the picture element.
bLazy can serve retina images on retina devices.
bLazy can lazy load everything with a src like iframes, HTML5 videos, scripts, unity games etc.
bLazy supports all browsers used today including legacy browsers like IE7 and 8.
bLazy supports all main module formats like AMD, CommonJS and globals.

WISHLIST/NEW FEATURES REQUESTED BY YOU

Only preload "first frame" of progressive jpegs.
Add support for CSS background property; image-set (caniuse).
Add a class when the lazyloading begins.
Option to keen load once on screen images have loaded.
Add option to disable success/error classes
Animate the container that contains the image you lazy load. You can do that today by adding/removing a class in the success callback.

CHANGELOG

v 1.8.2 (2016/10/25)

Added null check in public load function.
Bugfix: Fixed this issue defaulting to window when passing revalidate or destroy in setTimeout as reference #73 and #112. Thanks PeteDuncanson.
Bugfix: If parts of container is outside window use the viewport boundaries #113 and #114. Thanks dbirkbeck.

v 1.8.1 (2016/10/22)

Bugfix: Created polyfill and check for support of Element.closest which was introduced in the container fix in v. 1.8.0.

v 1.8.0 (2016/10/16)

Bugfix: Non-visible images being loaded inside container #23 and #96.

v 1.7.1 (2016/10/14)

Bugfix: In safari the picture element always loaded the default/fallback image #92.

v 1.7.0 (2016/10/10)

Bugfix: When lazyloading picture elements it also loaded the fallback/regular image #92 and 108. Thanks @idoshamun
Refactored loadElement function to avoid redundancy.

v 1.6.4 (2016/10/08)

Bugfix: When lazyloading srcset images it also loaded the fallback/regular image #99. Thanks @m0uH

v 1.6.3 (2016/09/30)

Changed event listener to passive listener #106. Thanks @idoshamun
Added support for web components (shadow dom) #107. Thanks again @idoshamun

v 1.6.2 (2016/05/09)

Fixed bug introduced in v.1.6.0, not using retina/breakpoint src #90.

v 1.6.1 (2016/05/02)

Implemented a workaround for onload/onerror bug introduced in chrome v50, LINK. Fixed #85.

v 1.6.0 (2016/04/30)

Added support for srcset and the picture element. Fixed #69, #75, #77 and #82.
Added support for lazy load of videos with sources. Fixed #81.
Bugfix. Ensuring that error and success classes won't be added multiple times. Fixed #84.
Marked breakpoints as obsolete. Will be removed in upcoming version. Use srcset and/or the picture element instead.

v 1.5.4 (2016/03/06)

Fixed two Safari bugs: #66 and #78. Ensuring "DOM ready".

v 1.5.3 (2016/03/01)

Implemented #30. Keeping data source until success.
Fixed #47. After implementing #30 you can now get the image src and more information in the error/success callbacks.
Added example page to repo /example/index.html.

v 1.5.2 (2015/12/01)

Fixed minor bug where the error class was added when calling revalidate().
Minor refactoring

v 1.5.1 (2015/11/14)

Fixed toArray function so it now works in IE7 + 8 again. Bug introduced in 1.4.0. Thanks for reporting @imcotton.
Fixed #41. Added options for validate and saveViewportOffset delay.

v 1.5.0 (2015/10/30)

Added new feature. Now you can lazy load everything with a src attribute like iframes, unity games etc.
Fixed #45. Now you can pass an option if you always want to load invisible images/elements.
Fixed #49. Expanded the load function so it's now possible to pass a list of elements instead of only one element. Tested with getElementById, getElementsByClassName, querySelectorAll, querySelector and jQuery selector.
Fixed #63.

v 1.4.1 (2015/10/12)

Fixed #60. An "Uncaught TypeError" when options is null introduced in the refactoring in version 1.4.0.

v 1.4.0 (2015/09/28)

Fixed #56. Now it's possible to create multiple versions of blazy without overriding options.

v 1.3.1 (2015/02/01)

Added support for CommonJS-like environments that support module.exports like node.

v 1.3.0 (2015/01/23)

Fixed #34. Expanded public load function with force attribute, so you can force hidden images to be loaded.
Fixed #24, #32 and #35. Updated "elementInView" function with intersection check. Thanks @teohhanhui.

v 1.2.2 (2014/05/04)

Fixed #15, when you resize the browser window in another tab bLazy didn't trigger new images in view. Thanks joshribakoff.

v 1.2.1 (2014/03/23)

When lazy loading background images it now only updates the background-image css attribute. Thanks Saku.

v 1.2.0 (2014/02/15)

Important note: renamed option multi to breakpoints because it's much more descriptive.
Added AMD support.
Minor refactoring.

v 1.1.3 (2014/01/21)

Fixed hardcoded retina check (isRetina = true).
Fixed "Uncaught TypeError" when data-src is null. Instead it'll trigger the error callback.

v 1.1.2 (2014/01/03)

New feature: After many requests I added the possibility to handle retina images (if youâre not doing retina-first).
New feature: Now you can also lazy load background images.
Added new option, separator. Used if you want to pass retina images, default separator is â|â. (data-src=âimage.jpg|image@2x.jpgâ).

v 1.1.1 (2013/12/27)

Fixed #1, resize/scroll events may be detached when adding elements by ajax.
Added new option, errorClass. Classname an image will get if something goes wrong, default is âb-errorâ.
Renamed option loadedClass to successClass so naming is aligned. Default is still âb-loadedâ.

v 1.1.0 (2013/11/22)

Renamed success callback from onLoaded to success.
Added onerror callback; error.
Added the possibility to pass multiple containers instead of one.

v 1.0.5 (2013/10/7)

Fixed "Uncaught TypeError" when container isn't default (window).

v 1.0.4 (2013/8/29)

Added null check so we won't try to load an image if it's missing a data source.

v 1.0.3 (2013/8/27)

Added new option, loadedClass. Classname an image will get when loaded.
Added support for horizontal lazy loading.
Reduced throttle time for validate.

v 1.0.2 (2013/8/7)

Fixed typo in unbindEvent function.
Added support for IE7 as promised (fallback for querySelectorAll).

v 1.0.1 (2013/8/6)

Performance improvements.
Added throttle function to ensure that we don't call resize/scroll functions too often.
Cleaning image markup when image has loaded.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot