### Local Install via Bower
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Command to install Vanilla LazyLoad locally in a project using Bower.
```bash
bower install vanilla-lazyload
```
--------------------------------
### Local Install via npm
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Command to install Vanilla LazyLoad locally in a project using npm.
```bash
npm install vanilla-lazyload
```
--------------------------------
### Lazy Load Basic Images
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates simple lazy loading of images without using any placeholders. This is a fundamental example of how to implement lazy loading for images.
```html
Basic Lazy Load Images
Basic Lazy Load Images
```
--------------------------------
### Lazy Video Example
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates how to use the 'lazy' class and 'data-src' attributes to lazy load video elements. This includes specifying poster images and multiple source types for broader compatibility.
```html
```
--------------------------------
### Lazy Iframe Example
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Shows how to implement lazy loading for iframe elements using the 'lazy' class and the 'data-src' attribute.
```html
```
--------------------------------
### Vanilla Lazyload: Callback on Loading Start
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
A callback function executed when an element begins loading. It receives the DOM element and the lazyload instance as arguments.
```javascript
callback_loading: (el)=>{console.log("Loading", el)}
```
--------------------------------
### Lazyload Script Execution Example
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazy_functions.html
Another instance of script execution, likely indicating the core functionality of the vanilla-lazyload library being invoked.
```JavaScript
Script execution here
```
--------------------------------
### Lazy Load Responsive Images with srcset
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example shows how to lazy load responsive images using the `srcset` attribute, allowing the browser to select the most appropriate image source based on screen size and resolution.
```html
Lazy Load Responsive Images with srcset
Lazy Load Responsive Images with srcset
```
--------------------------------
### Lazy Load Video with Autoplay
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates lazy loading a video element that includes multiple `` tags and is configured to autoplay. It also shows how to manage preload options for autoplaying videos.
```html
Lazy Load Video with Autoplay
Lazy Load Video with Autoplay
```
--------------------------------
### Lazy Load Video with Multiple Source Tags
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example shows how to lazy load a video element that includes multiple `` tags. It also demonstrates different preload options and ensures no autoplay is used.
```html
Lazy Load Video
Lazy Load Video
```
--------------------------------
### Lazy Load Responsive Images with srcset and sizes
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates lazy loading responsive images using `srcset` and the standard `sizes` attribute. It allows the browser to efficiently select the correct image source based on layout and viewport conditions.
```html
Lazy Load Responsive Images with srcset and sizes
Lazy Load Responsive Images with srcset and sizes
```
--------------------------------
### Lazy Load Background Images
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates how to lazy load background images using CSS. The library applies the background image to the element once it enters the viewport.
```html
Lazy Load Background Images
Lazy Load Background Images
```
--------------------------------
### Implement LazyLoad with Callbacks
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/image_ph_inline.html
This JavaScript code demonstrates how to initialize and use the LazyLoad library with various callback functions. These callbacks allow you to hook into different stages of the lazy loading process, such as when an element enters the viewport, starts loading, finishes loading, or encounters an error. The `data-src` attribute is used to specify the actual source of the image.
```javascript
(function () {
function logElementEvent(eventName, element) {
console.log(Date.now(), eventName, element.getAttribute("data-src"));
}
var callback_enter = function (element) {
logElementEvent("🔑 ENTERED", element);
};
var callback_exit = function (element) {
logElementEvent("🚪 EXITED", element);
};
var callback_loading = function (element) {
logElementEvent("⌚ LOADING", element);
};
var callback_loaded = function (element) {
logElementEvent("👍 LOADED", element);
};
var callback_error = function (element) {
logElementEvent("💀 ERROR", element);
element.src = "./images/440x560-Error.webp";
};
var callback_finish = function () {
logElementEvent("✔️ FINISHED", document.documentElement);
};
var callback_cancel = function (element) {
logElementEvent("🔥 CANCEL", element);
};
var ll = new LazyLoad({
// Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_cancel: callback_cancel,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
})();
```
--------------------------------
### Vanilla Lazyload Initialization Event Listener
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html
This JavaScript code adds an event listener to the window that listens for the 'LazyLoad::Initialized' custom event. When this event is fired, it logs the initialized LazyLoad instance details to the console, providing information about the library's setup.
```javascript
window.addEventListener(
"LazyLoad::Initialized",
function (e) {
console.log(e.detail.instance);
},
false
);
```
--------------------------------
### LazyLoad Initialization with Multiple Background Image Callbacks
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/background_images_multi.html
Initializes the LazyLoad library with specific callback functions for various events like entering the viewport, exiting, cancellation, application, loading, successful loading, errors, and completion. This setup is tailored for handling multiple background images.
```JavaScript
function logElementEvent(eventName, element) { console.log(Date.now(), eventName, element.getAttribute("data-bg-multi")); }
var callback_enter = function (element) { logElementEvent("🔑 ENTERED", element); };
var callback_exit = function (element) { logElementEvent("🚪 EXITED", element); };
var callback_loading = function (element) { logElementEvent("⌚ LOADING", element); };
var callback_applied = function (element) { logElementEvent("👍 APPLIED", element); };
var callback_loaded = function (element) { logElementEvent("👍 LOADED", element); };
var callback_error = function (element) { logElementEvent("💀 ERROR", element); element.style.backgroundImage = "url("./images/440x560-Error.webp")"; };
var callback_finish = function () { logElementEvent("✔️ FINISHED", document.documentElement); };
var callback_cancel = function (element) { logElementEvent("🔥 CANCEL", element); };
LL = new LazyLoad({
// Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_cancel: callback_cancel,
callback_applied: callback_applied,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
```
--------------------------------
### Mixed Native and JS Lazy Loading with HTML and JavaScript
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates how to use both native browser lazy loading and vanilla-lazyload for different elements on the same page. It shows how to configure vanilla-lazyload with `use_native: true` for elements like images, iframes, and videos, while also handling background images separately.
```html
```
```js
// Instance using native lazy loading
const lazyContent = new LazyLoad({
use_native: true // <-- there you go
});
// Instance without native lazy loading
const lazyBackground = new LazyLoad({
// DON'T PASS use_native: true HERE
});
```
--------------------------------
### Initialize LazyLoad with Options
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates the most common way to initialize the LazyLoad constructor by passing an options object. This sets up the lazy loading functionality with specified configurations.
```javascript
var aLazyLoad = new LazyLoad({
/* options here */
});
```
--------------------------------
### Include LazyLoad via CDN
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Provides the HTML script tag to include the LazyLoad library from a CDN. This is the simplest way to get started.
```html
```
--------------------------------
### Initialize LazyLoad Instance
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Shows the basic JavaScript code to instantiate LazyLoad with default or custom settings.
```js
var lazyLoadInstance = new LazyLoad({
// Your custom settings go here
});
```
--------------------------------
### Async Script Initialization
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Explains how to load the LazyLoad script asynchronously and configure it for self-initialization by setting global options before the script tag.
```html
```
--------------------------------
### Import LazyLoad as ES Module (Local)
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates how to import LazyLoad as an ES module when installed locally in a project.
```js
import LazyLoad from "vanilla-lazyload";
```
--------------------------------
### Async Script with Instance Reference
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates how to load the LazyLoad script asynchronously and retrieve the instance reference by listening for the 'LazyLoad::Initialized' event.
```html
```
--------------------------------
### Global LazyLoad Instance and Print Event Listeners
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/print.html
Initializes a global Vanilla LazyLoad instance (`wLazyLoad`) with the defined callbacks. It also sets up browser print event listeners (`onbeforeprint` and `matchMedia`) to trigger `wLazyLoad.loadAll()` before printing, ensuring all images are loaded.
```javascript
var wLazyLoad = new LazyLoad({
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_cancel: callback_cancel,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (!isSafari) {
window.onbeforeprint = function () {
wLazyLoad.loadAll();
};
} else {
var mediaQueryList = window.matchMedia("print");
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
wLazyLoad.loadAll();
}
});
}
```
--------------------------------
### HTML Structure for LazyLoad Demo
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/load.html
This HTML snippet defines the structure for a product listing page, including images that will be lazily loaded. It sets up basic styling and uses placeholder images with specific classes for LazyLoad to target.
```html
LazyLoad Demos - Static Load Method
```
--------------------------------
### CSS for LazyLoad Demo Layout
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/load.html
Basic CSS to style the product grid and individual product items. It includes styles for layout, image dimensions, and hover effects, ensuring a responsive and visually appealing presentation.
```css
body {
max-width: 1280px;
margin: 0 auto;
background: white;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
display: block;
position: relative;
text-align: center;
text-decoration: none;
width: 220px;
}
.product img {
display: block;
width: 220px;
height: 280px;
}
.product:hover .product-image__b.loaded {
opacity: 1;
}
.product-image__a {
margin: 0 auto;
}
.product-image__b {
opacity: 0;
transition: opacity 0.5s;
position: absolute;
top: 0;
left: calc(50% - 220px / 2);
}
img:not([src]) {
visibility: hidden;
}
```
--------------------------------
### Lazy Load Background Images with image-set()
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates lazy loading background images using the CSS `image-set()` function. This allows for resolution-dependent background images.
```html
Lazy Load Background Images with image-set()
Lazy Load Background Images with image-set()
```
--------------------------------
### Vanilla LazyLoad Basic Initialization with Callbacks
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/image_no_classes.html
Initializes the LazyLoad library with custom callbacks for various events like entering, exiting, loading, and errors. It also sets up error handling to display a placeholder image.
```javascript
(function () { function logElementEvent(eventName, element) { console.log(Date.now(), eventName, element.getAttribute("data-src")); } var callback_enter = function (element) { logElementEvent("🔑 ENTERED", element); }; var callback_exit = function (element) { logElementEvent("🚪 EXITED", element); }; var callback_loading = function (element) { logElementEvent("⌚ LOADING", element); }; var callback_loaded = function (element) { logElementEvent("👍 LOADED", element); }; var callback_error = function (element) { logElementEvent("💀 ERROR", element); element.src = "./images/440x560-Error.webp"; }; var callback_finish = function () { logElementEvent("✔️ FINISHED", document.documentElement); }; var callback_cancel = function (element) { logElementEvent("🔥 CANCEL", element); }; var ll = new LazyLoad({ class_applied: "", class_loading: "", class_loaded: "", class_error: "lz-error", class_entered: "", class_exited: "", // Assign the callbacks defined above callback_enter: callback_enter, callback_exit: callback_exit, callback_cancel: callback_cancel, callback_loading: callback_loading, callback_loaded: callback_loaded, callback_error: callback_error, callback_finish: callback_finish }); })();
```
--------------------------------
### Customizing Lazyload Attributes
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Allows customization of the data attributes used by Vanilla-Lazyload, enabling migration from other lazy loading scripts. For example, you can use 'data-origin' instead of the default 'data-src'.
```JavaScript
const lazyLoadInstance = new LazyLoad({
data_attribute: 'data-origin',
class_attribute: 'lazy-custom'
});
```
--------------------------------
### Lazy Multiple Background Images with HiDPI Support
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Illustrates lazy loading multiple background images with HiDPI support using `data-bg-multi` and `data-bg-multi-hidpi` attributes.
```html
...
```
--------------------------------
### Lazy Load Objects (SVGs, PDFs)
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example shows how to lazy load object elements, such as animated SVGs or PDF files. The content of these objects is loaded only when they become visible.
```html
Lazy Load Objects
Lazy Load Objects
```
--------------------------------
### JavaScript Initialization and Event Handling for LazyLoad
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/load.html
Initializes Vanilla LazyLoad with custom callback functions for various loading states (enter, exit, loading, loaded, error, finish, cancel). It also sets up mouseover event listeners on product elements to manually trigger image loading.
```javascript
(function (w, d) {
function logElementEvent(eventName, element) {
console.log(Date.now(), eventName, element.getAttribute("data-src"));
}
var callback_enter = function (element) {
logElementEvent("🔑 ENTERED", element);
};
var callback_exit = function (element) {
logElementEvent("🚪 EXITED", element);
};
var callback_loading = function (element) {
logElementEvent("⌚ LOADING", element);
};
var callback_loaded = function (element) {
logElementEvent("👍 LOADED", element);
};
var callback_error = function (element) {
logElementEvent("💀 ERROR", element);
element.src = "./images/440x560-Error.webp";
};
var callback_finish = function () {
logElementEvent("✔️ FINISHED", document.documentElement);
};
var callback_cancel = function (element) {
logElementEvent("🔥 CANCEL", element);
};
var options = {
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_cancel: callback_cancel,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
};
var page_ll = new LazyLoad(options);
function mouseoverHandler(event) {
var product = event.currentTarget;
var lazyImg = product.querySelector(".lazy-hover");
if (!!lazyImg.getAttribute("data-ll-status")) {
return;
}
LazyLoad.load(lazyImg, options);
}
function nodeSetToArray(nodeSet) {
return Array.prototype.slice.call(nodeSet);
}
function initializeMouseBehaviour() {
const products = document.querySelectorAll(".product");
nodeSetToArray(products).forEach(function (product) {
product.addEventListener("mouseover", mouseoverHandler, true);
});
}
initializeMouseBehaviour();
})(window, document);
```
--------------------------------
### Lazy Load Iframes
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates how to lazy load iframe elements. The iframe content is only loaded when the iframe enters the viewport, improving initial page load performance.
```html
Lazy Load Iframes
Lazy Load Iframes
```
--------------------------------
### Lazy Load Multiple Background Images
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example shows how to lazy load multiple background images for a single element. The library supports applying multiple background images via CSS.
```html
Lazy Load Multiple Background Images
Lazy Load Multiple Background Images
```
--------------------------------
### Lazy Background Image with HiDPI Support
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates how to lazy load a background image with HiDPI (high-density pixel) display support using `data-bg` and `data-bg-hidpi` attributes.
```html
```
--------------------------------
### Configure LazyLoad Threshold (Pixels)
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Set a pixel-based threshold to determine when elements should start loading. This value represents the distance from the viewport edge at which an element becomes visible. The default threshold is 300 pixels.
```javascript
const lazyLoadInstance = new LazyLoad({
threshold: 0
});
```
--------------------------------
### Vanilla LazyLoad Initialization with Multiple Instances and Callbacks
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/async_multiple.html
Initializes multiple Vanilla LazyLoad instances with custom callbacks for various events. Each instance is configured with a specific container and a set of event handlers to log loading states.
```javascript
function logElementEvent(eventName, element) { console.log(Date.now(), eventName, element.getAttribute("data-src")); }
var callback_enter = function (element) { logElementEvent("🔑 ENTERED", element); };
var callback_exit = function (element) { logElementEvent("🚪 EXITED", element); };
var callback_loading = function (element) { logElementEvent("⌚ LOADING", element); };
var callback_loaded = function (element) { logElementEvent("👍 LOADED", element); };
var callback_error = function (element) { logElementEvent("💀 ERROR", element); element.src = "./images/440x560-Error.webp"; };
var callback_finish = function () { logElementEvent("✔️ FINISHED", document.documentElement); };
var callback_cancel = function (element) { logElementEvent("🔥 CANCEL", element); };
window.lazyLoadInstances = [];
window.lazyLoadOptions = [
{
container: document.getElementById("results1"), // Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_cancel: callback_cancel,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
},
{
container: document.getElementById("results2"), // Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
}
];
window.addEventListener(
"LazyLoad::Initialized",
function (e) {
var instance = e.detail.instance;
console.log(instance);
lazyLoadInstances.push(instance);
},
false
);
```
--------------------------------
### HTML Structure for Lazyload Demo Items
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/hundreds.html
This HTML snippet represents the structure of a list of items for the lazyload demo. Each list item contains a link, which in turn contains an image. The images use placeholder sources and are intended to be lazy-loaded by the Vanilla Lazyload library.
```html
* [](#/it/donna/stivaletti_cod44721746jj.html)
* [](#/it/donna/open-toe_cod44740806jx.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html)
* [](#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html)
* [](#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html)
* [](#/it/donna/stivali_cod44736534fq.html)
* [](#/it/donna/stivali_cod44735388ui.html)
* [](#/it/donna/stivaletti_cod44739165ev.html)
* [](#/it/donna/stivaletti_cod44739454hf.html)
* [](#/it/donna/stivali_cod44719480km.html)
* [](#/it/donna/stivaletti_cod44719687td.html)
* [](#/it/donna/decollete_cod44721899ng.html)
* [](#/it/donna/mocassini_cod44721744sl.html)
* [](#/it/donna/stivaletti_cod44716730kr.html)
* [](#/it/donna/decollete_cod44718734xl.html)
* [](#/it/donna/decollete_cod44721796uk.html)
* [](#/it/donna/francesine_cod44717679mj.html)
* [](#/it/donna/stivaletti_cod44724594vu.html)
* [](#/it/donna/decollete_cod44726148aq.html)
* [](#/it/donna/mocassini_cod44719629nt.html)
* [](#/it/donna/mocassini_cod44725329kq.html)
* [](#/it/donna/stivali_cod44724026qs.html)
* [](#/it/donna/stivaletti_cod44720256gw.html)
* [](#/it/donna/stivaletti_cod44722062id.html)
* [](#/it/donna/mocassini_cod44722402rh.html)
* [](#/it/donna/stivaletti_cod44726296vu.html)
* [](#/it/donna/stivaletti_cod44725755ct.html)
* [](#/it/donna/stivaletti_cod44725348nv.html)
* [](#/it/donna/stivaletti_cod44721879xx.html)
* [](#/it/donna/cuissardes_cod44729472iq.html)
* [](#/it/donna/decollete_cod44725388jv.html)
* [](#/it/donna/stivaletti_cod44721854ce.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html)
* [](#/it/donna/mocassini_cod44727501hh.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html)
* [](#/it/donna/mocassini_cod44704882bq.html)
* [](#/it/donna/mocassini_cod44734002vc.html)
* [](#/it/donna/stivaletti_cod44721746jj.html)
* [](#/it/donna/open-toe_cod44740806jx.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html)
* [](#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html)
* [](#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html)
* [](#/it/donna/stivali_cod44736534fq.html)
* [](#/it/donna/stivali_cod44735388ui.html)
* [](#/it/donna/stivaletti_cod44739165ev.html)
* [](#/it/donna/stivaletti_cod44739454hf.html)
* [](#/it/donna/stivali_cod44719480km.html)
* [](#/it/donna/stivaletti_cod44719687td.html)
* [](#/it/donna/decollete_cod44721899ng.html)
* [](#/it/donna/mocassini_cod44721744sl.html)
* [](#/it/donna/stivaletti_cod44716730kr.html)
* [](#/it/donna/decollete_cod44718734xl.html)
* [](#/it/donna/decollete_cod44721796uk.html)
* [](#/it/donna/francesine_cod44717679mj.html)
* [](#/it/donna/stivaletti_cod44724594vu.html)
* [](#/it/donna/decollete_cod44726148aq.html)
* [](#/it/donna/mocassini_cod44719629nt.html)
* [](#/it/donna/mocassini_cod44725329kq.html)
* [](#/it/donna/stivali_cod44724026qs.html)
* [](#/it/donna/stivaletti_cod44720256gw.html)
* [](#/it/donna/stivaletti_cod44722062id.html)
* [](#/it/donna/mocassini_cod44722402rh.html)
* [](#/it/donna/stivaletti_cod44726296vu.html)
* [](#/it/donna/stivaletti_cod44725755ct.html)
* [](#/it/donna/stivaletti_cod44725348nv.html)
* [](#/it/donna/stivaletti_cod44721879xx.html)
* [](#/it/donna/cuissardes_cod44729472iq.html)
* [](#/it/donna/decollete_cod44725388jv.html)
* [](#/it/donna/stivaletti_cod44721854ce.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html)
* [](#/it/donna/mocassini_cod44727501hh.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html)
* [](#/it/donna/mocassini_cod44704882bq.html)
* [](#/it/donna/mocassini_cod44734002vc.html)
* [](#/it/donna/stivaletti_cod44721746jj.html)
* [](#/it/donna/open-toe_cod44740806jx.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html)
* [](#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html)
* [](#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html)
* [](#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html)
```
--------------------------------
### Asynchronous Loading LazyLoad with <script async>
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
This example demonstrates how to load the vanilla-lazyload library asynchronously using the `async` attribute on the script tag. This ensures the script doesn't block HTML parsing.
```html
Async Loading LazyLoad
```
```js
// Instance using native lazy loading
const lazyContent = new LazyLoad({
use_native: true // <-- there you go
});
// Instance without native lazy loading
const lazyBackground = new LazyLoad({
// DON'T PASS use_native: true HERE
});
```
--------------------------------
### Initialize LazyLoad with Options
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates the most common way to initialize the LazyLoad constructor by passing an options object. This sets up the lazy loading functionality with specified configurations.
```javascript
var aLazyLoad = new LazyLoad({
/* options here */
});
```
--------------------------------
### Include LazyLoad via CDN
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Provides the HTML script tag to include the LazyLoad library from a CDN. This is the simplest way to get started.
```html
```
--------------------------------
### Initialize LazyLoad Instance
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Shows the basic JavaScript code to instantiate LazyLoad with default or custom settings.
```js
var lazyLoadInstance = new LazyLoad({
// Your custom settings go here
});
```
--------------------------------
### Async Script Initialization
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Explains how to load the LazyLoad script asynchronously and configure it for self-initialization by setting global options before the script tag.
```html
```
--------------------------------
### Import LazyLoad as ES Module (Local)
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates how to import LazyLoad as an ES module when installed locally in a project.
```js
import LazyLoad from "vanilla-lazyload";
```
--------------------------------
### Async Script with Instance Reference
Source: https://github.com/verlok/vanilla-lazyload/blob/master/README.md
Demonstrates how to load the LazyLoad script asynchronously and retrieve the instance reference by listening for the 'LazyLoad::Initialized' event.
```html
```
--------------------------------
### Global LazyLoad Instance and Print Event Listeners
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/print.html
Initializes a global Vanilla LazyLoad instance (`wLazyLoad`) with the defined callbacks. It also sets up browser print event listeners (`onbeforeprint` and `matchMedia`) to trigger `wLazyLoad.loadAll()` before printing, ensuring all images are loaded.
```javascript
var wLazyLoad = new LazyLoad({
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_cancel: callback_cancel,
callback_loading: callback_loading,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (!isSafari) {
window.onbeforeprint = function () {
wLazyLoad.loadAll();
};
} else {
var mediaQueryList = window.matchMedia("print");
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
wLazyLoad.loadAll();
}
});
}
```
--------------------------------
### HTML Structure for LazyLoad Demo
Source: https://github.com/verlok/vanilla-lazyload/blob/master/demos/load.html
This HTML snippet defines the structure for a product listing page, including images that will be lazily loaded. It sets up basic styling and uses placeholder images with specific classes for LazyLoad to target.
```html
