		{
		"name": "vanilla-lazyload",
		"version": "12.0.2",
		"version": "12.0.3",
		"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
		@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

102

README.md

		@@ -108,3 +108,3 @@ LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading your content images, videos and iframes only as they enter the viewport. It's written in plain "vanilla" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it works with [responsive images](https://alistapart.com/article/responsive-images-in-practice) and it supports native lazy loading. See [notable features](#-notable-features) for more.

		The latest, recommended version of LazyLoad is 12.0.0.
		The latest, recommended version of LazyLoad is 12.0.3.

		@@ -124,3 +124,3 @@ ### To polyfill or not to polyfill IntersectionObserver?
		```html
		<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.3/dist/lazyload.min.js"></script>
		```
		@@ -131,4 +131,4 @@
		```html
		<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.5.1/intersection-observer.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.3/dist/lazyload.min.js"></script>
		```
		@@ -168,4 +168,4 @@
		```js
		var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.amd.min.js";
		var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js";
		var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.3/dist/lazyload.amd.min.js";
		var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.1.0/intersection-observer-amd.js";

		@@ -214,3 +214,3 @@ /// Dynamically define the dependencies
		```html
		<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
		<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.3/dist/lazyload.min.js"></script>
		```
		@@ -241,3 +241,3 @@
		```html
		<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
		<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.3/dist/lazyload.min.js"></script>
		```
		@@ -510,72 +510,18 @@

		### Occupy vertical space and maintain ratio
		### Occupy space and avoid content reflow

		You need to be sure that the containers of the images that are going to be lazy loaded occupy some vertical space. This because if the images have an initial height of `0`, all of them will probably be inside the viewport before time, so they will be loaded all at once.
		It's a good idea to make sure that your lazy images occupy some space even before they are loaded, otherwise the `img` elements will be shrinked to zero-height, causing your layout to reflow and making lazyload inefficient.

		In an elastic layout where images width change, you want to keep vertical space maintaining the images height, using a width/height ratio calculation.
		There are [many ways to avoid content reflow](https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/), but my favourite one is to use an SVG placeholder of the same ratio of the lazy images.

		```css
		.image-wrapper {
		width: 100%;
		height: 0;
		padding-bottom: 66.67%; /* You define this doing height / width * 100% */
		position: relative;
		}
		.image {
		width: 100%;
		/height: auto;/
		position: absolute;
		}
		```html
		<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
		data-src="//picsum.photos/900/600"
		alt="Lazy loading test image" />
		```

		More info in [Sizing Fluid Image Containers with a Little CSS Padding Hack](http://andyshora.com/css-image-container-padding-hack.html) by Andy Shora.
		Alternatively (but less efficiently) you can use a tiny, scaled-down version of your images as a placeholder, stretching them to the final size of the images, and obtain a blur-up effect when the full images load.

		There's also a useful SASS mixin to [maintain aspect ratio](https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/) on CSS tricks.
		Using a placeholder image will also make sure that browsers don't show your `alt` content instead of the images before the lazy-loading starts.

		```scss
		@mixin aspect-ratio($width, $height) {
		position: relative;
		&:before {
		display: block;
		content: "";
		width: 100%;
		padding-top: ($height / $width) * 100%;
		}
		> .content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		}
		}
		```

		### Show the images while they load

		Images should be shown while they load, and not after, to give your users the best perceived performance. This is especially true if you use a progressive loading format like Progressive JPEG.

		In order to make your images visible as soon as LazyLoad sets the `src`/`srcset` attribute to it, you can either:

		Do it like that via CSS:

		```css
		/* Prevents img without src to appear */
		img:not([src]) {
		visibility: hidden;
		}
		```

		Or instead of the above `:not()` selector do it using the CSS classes of `class_loading` and `class_loaded` set by LazyLoad when loading starts or is completed - see [API](#-api).


		### Do NOT use placeholder images

		We do not recommend to use a placeholder image (like a transparent pixel GIF) in your HTML.

		* For best perceived performance, leave the `src` and `srcset` attributes blank. Doing so, the image will be shown as soon as LazyLoad starts loading the image. See [this video](https://youtu.be/2E3ociaFJS0) or [this pen](https://codepen.io/verlok/pen/bKYggE?editors=0110) to test the difference (remember to disable the cache and to set a slower connection speed if you have a very fast one).
		* If you put anything in the src (like a transparent GIF), then LazyLoad starts loading the image but it won't be shown by browsers until the new image is loaded, leading to a worse perceived performance.

		It's safe not to put any value in the `src` nor `srcset` attributes, even if your HTML won't validate by a static code analyzer. The reason is that once JavaScript is executed, those values will be set by LazyLoad. For SEO, if the client is a crawler like Googlebot, it will be detected by LazyLoad which will fix the HTML.

		<!--
		@@ -587,16 +533,2 @@ MOAR points to add to the README:

		### Dealing with Microsoft Edge problems

		According to what reported in #152, for Microsoft Edge to fire the IntersectionObserver for an `img` element, it must have a size. Since `img`s are displayed `inline-block` as standard, MS Edge (version not specified) doesn't read them correctly.

		By setting the following, Edge is able to see the images and they get loaded.

		```css
		img[data-src],
		img[data-srcset] {
		display: block;
		min-height: 1px;
		}
		```

		---
		@@ -603,0 +535,0 @@

vanilla-lazyload - npm Package Compare versions

Worsened metrics