![](\"https://c5.patreon.com/external/logo/become_a_patron_button@2x.png\"){kind=logo}
\n\n\n\n## Usage\n\nIn HTML, add an identifier to the element (default selector identified is `lozad` class):\n```html\n* You can open your network section in dev tools, for see how images are loading
\n![](\"images/thumbs/picture-01.jpg\")
\n \npicture-01.jpg media=\"(min-width: 1280px)\"\npicture-02.jpg media=\"(min-width: 980px)\"\npicture-03.jpg media=\"(min-width: 320px)\"\n\n
![](\"images/thumbs/picture-04.jpg\")
\n \npicture-04.jpg media=\"(min-width: 1280px)\"\npicture-05.jpg media=\"(min-width: 980px)\"\npicture-06.jpg media=\"(min-width: 320px)\"\n\n
![](\"images/thumbs/picture-07.jpg\")
\n \npicture-07.jpg media=\"(min-width: 1280px)\"\npicture-08.jpg media=\"(min-width: 980px)\"\npicture-09.jpg media=\"(min-width: 320px)\"\n\n
* You can open your network section in dev tools, for see how background-images are loading
\n\nSingle Background Image\n\n
\nMultiple Background Images\nCheck the console to see that these are indeed separate images.\n\n
\nMultiple Background Images\nFallback Method ( where the first / foremost image fails )\nCheck the console to see that the first image is failed to load.\n\n
\nResponsive Background Images set\nChange a device pixel ratio with devtools and check the console to see which image dimension was loaded\n\n
video courtesy of Big Buck Bunny.
\nnormal video example\n
![](\"image.png\")
\n```\n\nAll you need to do now is just instantiate Lozad as follows:\n```js\nconst observer = lozad(); // lazy loads elements with default selector as '.lozad'\nobserver.observe();\n```\nor with a DOM `Element` reference:\n```js\nconst el = document.querySelector('img');\nconst observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid\nobserver.observe();\n```\nor with custom options:\n```js\nconst observer = lozad('.lozad', {\n rootMargin: '10px 0px', // syntax similar to that of CSS Margin\n threshold: 0.1, // ratio of element convergence\n enableAutoReload: true // it will reload the new image when validating attributes changes\n});\nobserver.observe();\n```\nReference:\n\n - [IntersectionObserver options: rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)\n - [IntersectionObserver options: thresholds](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds)\n\nor if you want to give custom function definition to load element:\n```js\nlozad('.lozad', {\n load: function(el) {\n console.log('loading element');\n\n // Custom implementation to load an element\n // e.g. el.src = el.getAttribute('data-src');\n }\n});\n```\n\nIf you would like to extend the `loaded` state of elements, you can add the loaded option:\n\n> **Note**: The `\"data-loaded\"=\"true\"` attribute is used by lozad to determine if an element has been previously loaded.\n```js\nlozad('.lozad', {\n loaded: function(el) {\n // Custom implementation on a loaded element\n el.classList.add('loaded');\n }\n});\n```\n\nIf you want to lazy load dynamically added elements:\n\n```js\nconst observer = lozad();\nobserver.observe();\n\n// ... code to dynamically add elements\nobserver.observe(); // observes newly added elements as well\n```\n\nfor use with responsive images\n\n```html\n\n![](\"images/thumbs/01.jpg\")
\n \n ![](\"images/thumbs/02.jpg\")
\n \n ![](\"images/thumbs/03.jpg\")
\n \n ![](\"images/thumbs/04.jpg\")
\n \n ![](\"images/thumbs/05.jpg\")
\n \n ![](\"images/thumbs/06.jpg\")
\n \n ![](\"images/thumbs/07.jpg\")
\n \n ![](\"images/thumbs/08.jpg\")
\n \n ![](\"images/thumbs/09.jpg\")
\n \n ![](\"images/thumbs/10.jpg\")
\n \n ![](\"images/thumbs/11.jpg\")
\n \n ![](\"images/thumbs/12.jpg\")
\n \n