$lazy - IntersectionObserver

Style.Tools

Style.Tools Github

Search…

CSS optimization widget

Critical CSS Generator

Unused CSS Remover & Extractor

Duplicate CSS Remover

$async - async loader

$lazy - IntersectionObserver

$lazybg

$lazy - IntersectionObserver

​@style.tools/lazy is a lightweight lazy loader based on Intersection Observer V2 with a tiny fallback for old browsers.
1
// simple: lazy load images
2
$lazy('[data-src]');
3
​
4
// simple: in-view callback
5
$lazy('#element', function() {
6
  // inview callback
7
});
Copied!
Lazy loading of background-image in stylesheets.
1
$lazybg(
2
  sheets, /* stylesheet element(s), default: document.styleSheets (all) */
3
  lazy_config, /* optional: config to pass to $lazy() */
4
  resolver, /* optional: JSON or javascript image resolver */
5
  webp /* disable WebP rewrite (when using lazybg+webp.js) */
6
);
Copied!
$lazy can be configured using an async script element.
1
<script async src="dist/lazy+data-attr.js" data-z='selector' data-b='/base/path/'></script>
Copied!
The script element accepts the following parameters:
Parameter
Description
Type
​
data-z
​
String
Selector or config object.
data-zz
​
Array
Multiple selector or config objects.
data-b
​
String
Base path (URL rebasing).
When using $async, $lazy can be used as timing method with automated polyfill loading.
1
<script async src="dist/async.js" data-c='[{
2
   "src": "dist/intersectionobserver-polyfill.js",
3
   "load_timing": {
4
      "type": "method",
5
      "method": "$lazypoly"
6
    },
7
    "cache": "localstorage"
8
},{
9
  "ref": "$z",
10
  "src": "dist/lazy.js",
11
  "attributes": {
12
    "data-z": "[\".selector\", 0.006, \"0px\"]"
13
  },
14
  "load_timing": {
15
    "type": "requestAnimationFrame",
16
    "frame": -1
17
  },
18
  "cache": "localstorage"
19
}]'></script>
20
<!-- timing: requestAnimationFrame @ frame -1 = faster than domready event
Copied!
Install via npm
1
npm install @style.tools/lazy --save
Copied!
Install via PHP Composer
1
composer require styletools/lazy
Copied!
Config
The selector entry accepts multiple configuration formats including a string, an Array, a Node, NodeList or a JSON object with observer configuration.
Simple config
1
$lazy({
2
   "selector": "[data-src]",
3
   "threshold": 0.006,
4
   "rootMargin": "0px"
5
});
Copied!
Custom observer config
1
$lazy({
2
   "selector": "[data-src]",
3
   "observer": {
4
      "threshold": 0.006,
5
      "rootMargin": "0px",
6
      "trackVisibility": true,
7
      "delay": 100
8
   }
9
});
Copied!
The array based index config is a compressed format to save size in the HTML document.
[0] = selector
[1] = threshold OR observer config when an object
[2] = rootMargin
Simple config
1
$lazy(["[data-src]", 0.006, "0px"]);
Copied!
Custom observer config
1
$lazy(["[data-src]", {
2
   "threshold": 0.006,
3
   "rootMargin": "0px",
4
   "trackVisibility": true,
5
   "delay": 100
6
}]);
Copied!
Inview & Out-of-view callback
The inview callback makes it possible to use $lazy as a simple inview script.
1
$lazy(".selector", function(target, observer, is_inview) {
2
​
3
  // element in view
4
  is_inview = boolean
5
​
6
  return false; // persist observer to enable out-of-view callback
7
});
Copied!
By returning false from a custom inview callback, the observer will not be removed and will trigger the callback again when the element moves in or out of view.
The inview argument accepts an array with 3 index positions:
1.
inview: a function to call when the element moves into view.
2.
out-of-view a function to call when the element moves out of view
3.
after_inview a function to call with the default inview-method after src and srcset have been rewritten.
When out-of-view is null, the inview method is used as out-of-view method.
1
$lazy(".selector", [
2
  function inview(target, observer) {
3
​
4
    // element in view
5
​
6
    return false; // persist observer
7
​
8
  },
9
  function out_of_view(target, observer) {
10
​
11
    // element out of view
12
​
13
    return false; // persist observer
14
​
15
  }]);
Copied!
To easily extend the original data-src based lazy loading of images, you can use an after_inview callback.
1
$lazy(".selector", [,,function after_inview(target) {
2
​
3
  // target has been lazy-loaded
4
  target.classList.add('custom-class');
5
}]);
Copied!
Custom observer callback
The third argument enables to manually define the IntersectionObserver callback.
1
$lazy('div#id', 0, function(entries) {
2
  // entries is a Array of `IntersectionObserverEntry` or HTML Nodes
3
  // you need to manually verify if the browser supports Intersection Observer
4
​
5
  if (window.IntersectionObserver) {
6
    // entries[0] = IntersectionObserverEntry
7
    // entries[0].target = element
8
  } else {
9
    // entries[0] = element
10
  }
11
})
Copied!
Lazy loading of background-image in stylesheets
See $lazybg.
Automatic .webp rewrite
It is possible to automatically load .webp images for browsers that support Google's WebP format. It saves a server-side redirect and it adds WebP support to the <img> tag.
Simply use the dist/lazy+webp... files to enable it.
The solution uses <img onerror> to fallback to the original image when the .webp image is 404.
To manually disable webp rewrites for an image add the HTML attribute data-webp="no". To disable it for a specific $lazy configuration, set the 4th argument to false.
$lazybg supports WebP rewrites by using dist/lazybg+webp.js.
data-z JSON config
To enable usage in combination with a strict Content-Security-Policy the script can be configured using a data-z attribute on the script source element.
1
<script data-z='{
2
   "selector": "[data-src*=&apos;cdn.domain.com&apos;]", 
3
   "observer": { 
4
      "threshold": [1.0],
5
      "trackVisibility": true,
6
      "delay": 100
7
   }
8
}'>
9
// dist/lazy-data-attr.js (source)
10
</script>
Copied!
Multiple configurations are supported via the attribute data-zz. The attributes accepts a JSON array with configurations.
1
<script async src="dist/lazy+data-attr.js" data-zz='["selector",{config...},{second config...}]'></script>
Copied!
Polyfill
$lazy includes a polyfill for IntersectionObserver. It can be automatically loaded when using $async.
Example using $async with data-c based config
1
<script data-c='[
2
  {
3
    "ref": "lazy",
4
    "src": "dist/lazy-data-attr+polyfill.js",
5
    "attributes": {
6
     "data-z": "[\"selector\", 0.006, \"0px\"]"
7
    },
8
    "load_timing": "domReady",
9
    "cache": "localstorage"
10
  },
11
  {
12
    "ref": "lazy-polyfill",
13
    "src": "dist/intersectionobserver-polyfill.js",
14
    "load_timing": {
15
      "type": "method",
16
      "method": "$lazypoly"
17
    },
18
    "cache": "localstorage"
19
  }
20
]'>
21
/* $async IIFE with timing and API module */
22
</script>
Copied!
In the example, the $async timing method method defines window.$lazypoly which will automatically load the polyfill for browsers that require the polyfill. It uses localStorage for instant loading.
Alternatively, when using $lazy without $async, you can manually define window.$lazypoly with a function that returns a Promise or a object containing a .then method.
1
window.$lazypoly = function() {
2
​
3
   // load polyfill
4
   // ...
5
​
6
   return {
7
      then: function(callback) {
8
​
9
         // wait until polyfill is loaded and resolve callback
10
​
11
         callback();
12
      }
13
   }
14
};
Copied!
When using $async you can alternatively use window.$lazypoly with a string or a object to pass to $async which could load anything.
Alternatively, when including $lazy inline, the data-poly attribute enables to define a string to pass to $async.js.
1
<script data-z='... lazy config ...' data-poly='... config to pass to $async.js to load polyfill ...'>
2
// dist/lazy-data-attr+polyfill.js
3
</script>
Copied!
Example Performance API timings
$lazy polyfill from localStorage