lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images

Overview

lazysizes

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.

It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.

How to

  1. Download the lazysizes.min.js script and include lazysizes in your webpage. (Or install via npm: npm install lazysizes --save or bower bower install lazysizes --save)

    ">
    <script src="lazysizes.min.js" async="">script>

    Or:

    import 'lazysizes';
    // import a plugin
    import 'lazysizes/plugins/parent-fit/ls.parent-fit';
    
    // Note: Never import/require the *.min.js files from the npm package.

    Note: For more information see here.

  2. lazysizes does not need any JS configuration: Add the class "lazyload" to your images/iframes in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image:

    ">
    
    <img data-src="image.jpg" class="lazyload" />
    ">
    
    <img
        data-sizes="auto"
        data-src="image2.jpg"
        data-srcset="image1.jpg 300w,
        image2.jpg 600w,
        image3.jpg 900w" class="lazyload" />
    ">
    
    <iframe frameborder="0"
    	class="lazyload"
        allowfullscreen=""
        data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
    iframe>

Demo with code examples

Can be seen here

Responsive image support (picture and/or srcset)

Lazysizes is built upon the Responsive image standard and extends it with additional functionality. For full cross browser responsive image support you must use either a full polyfill like picturefill or use the extreme lightweight partial respimg polyfill plugin or the responsive image on demand plugin. Alternatively, you can simply define a fallback src via the data-src attribute. If you want to learn more about the responsive image syntax read "The anatomy of responsive images".

What makes lazysizes so awesome:

lazysizes is different than other lazy image loaders.

  1. Detects any visibility changes on current and future lazyload elements in any web environment automatically: The script works as an universal, self-initializing, self-configuring and self-destroying component and detects any changes to the visibility of any current and future image/iframe elements automatically no matter whether it becomes visible through a user scroll, a CSS animation triggered through :hover or through any kind of JS behavior (carousel, slider, infinite scroll, masonry, isotope/filtering/sorting, AJAX, SPAs...). It also works automatically in conjunction with any kind of JS-/CSS-/Frontend-Framework (jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (see also the attrchange/re-initialization extension)).
  2. Future-proof: It directly includes standard responsive image support (picture and srcset)
  3. Separation of concerns: For responsive image support it adds an automatic sizes calculation as also alias names for media queries feature. There is also no JS change needed if you add a scrollable container with CSS (overflow: auto) or create a mega menu containing images.
  4. Performance: It's based on highly efficient, best practice code (runtime and network) to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.
  5. Extendable: It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation, in view callbacks or effects (see also the available plugins/snippets).
  6. Intelligent prefetch/Intelligent resource prioritization: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling (see also expand, expFactor and loadMode options). This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.
  7. Lightweight, but mature solution: lazysizes has the right balance between a lightweight and a fast, reliable solution
  8. SEO improved: lazysizes does not hide images/assets from Google. No matter what markup pattern you use. Google doesn't scroll/interact with your website. lazysizes detects, whether the user agent is capable to scroll and if not, reveals all images instantly.

More about the API

lazysizes comes with a simple markup and JS API. Normally you will only need to use the markup API.

Markup API

Add the class lazyload to all img and iframe elements, which should be loaded lazy. Instead of a src or srcset attribute use a data-src or data-srcset attribute:

">
<img data-src="image.jpg" class="lazyload" />

<img data-srcset="responsive-image1.jpg 1x, responsive-image2.jpg 2x" class="lazyload" />

Automatically setting the sizes attribute

lazysizes supports setting the sizes attribute automatically, corresponding to the current size of your image - just set the value of data-sizes to auto.

">
<img
	data-sizes="auto"
	data-srcset="responsive-image1.jpg 300w,
	    responsive-image2.jpg 600w,
	    responsive-image3.jpg 900w"
    class="lazyload" />

Important: How sizes is calculated: The automatic sizes calculation uses the display width of the image. This means that the width of the image has to be calculable at least approximately before the image itself is loaded (This means you can not use width: auto). Often the following general CSS rule might help: img[data-sizes="auto"] { display: block; width: 100%; } (see also specifying image/iframe dimensions with the recommended aspect ratio definition). If it is below 40 (can be configured through the minSize option), lazysizes traverses up the DOM tree until it finds a parent which is over 40 and uses this number.

The width auto-calculated by lazysizes can be modified using the lazybeforesizes event (lazybeforesizes documentation). Alternatively, the parent fit plugin can be used for sizing images to fit a parent / container, and is the only solution when an image's height needs to be taken into account when fitting it to its container (This also includes the use of object-fit).

The data-sizes="auto" feature only makes sense if you use the data-srcset attribute with width descriptors which allows the most appropriate image can be selected (It does not make sense if you use the x descriptor or only src.).

Recommended/possible markup patterns

lazysizes allows you to write an endless variety of different markup patterns. Find your own/best pattern or choose one of the following. (All of the following patterns can be also used for art direction using the picture element.)

Simple pattern

Add the class lazyload and simply omit the src attribute or add a data uri as fallback src.

my image ">


<img
	class="lazyload"
	data-srcset="image.jpg 1x, image2.jpg 2x"
    alt="my image" />

<img class="lazyload"
	data-srcset="progressive-image.jpg 1x, progressive-image2.jpg 2x"
    alt="my image" />


<img
	data-src="image.jpg"
	class="lazyload" />

Note: In case you are using either srcset/data-srcset or picture, we recommend to extend this pattern with either a data-src (see next pattern: "Combine data-srcset with data-src") or with a suitable src attribute (see: "modern pattern" or "LQIP").

Combine data-srcset with data-src

In case you want to use responsive images for supporting browsers, but don't want to include a polyfill, simply combine your data-srcset with a data-src attribute.

">

<img
	data-sizes="auto"
    data-src="image3.jpg"
	data-srcset="image3.jpg 600w,
	    image1.jpg 220w,
	    image2.jpg 300w,
	    image3.jpg 600w,
	    image4.jpg 900w"
	class="lazyload" />

Note: Due to the fact that the data-src will also be picked up by "Read-Later" Apps and other tools (for example Pin it button), this pattern also makes sense if you use a polyfill. In case you don't use a polyfill it is recommended that the first image candidate matches the fallback src.

LQIP/blurry image placeholder/Blur up image technique

If you are using the LQIP (Low Quality Image Placeholder) pattern, simply add a low quality image as the src:

">

<img
	data-sizes="auto"
    src="lqip-src.jpg"
	data-srcset="lqip-src.jpg 220w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />


<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />

The LQIP technique can be enhanced by combining it with CSS transitions/animation to sharpen/unblur or overfade the LQIP image.

Please also have a look at our lazysizes Blur Up plugin (recommended).

">
<style>
	.blur-up {
		-webkit-filter: blur(5px);
		filter: blur(5px);
		transition: filter 400ms, -webkit-filter 400ms;
	}

	.blur-up.lazyloaded {
		-webkit-filter: blur(0);
		filter: blur(0);
	}
style>

<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload blur-up" />



<style>
	.fade-box .lazyload,
	 .fade-box .lazyloading {
		opacity: 0;
		transition: opacity 400ms;
	}

	.fade-box img.lazyloaded {
		opacity: 1;
	}
style>

<div class="ratio-box fade-box">
	<img src="lqip-src.jpg" />
	<img data-src="image.jpg" class="lazyload" />
div>

modern transparent srcset pattern

Combine a normal src attribute with a transparent or low quality image as srcset value and a data-srcset attribute. This way modern browsers will lazy load without loading the src attribute and all others will simply fallback to the initial src attribute (without lazyload). (This nice pattern originated from @ivopetkov.)

">
<img
    src="image3.jpg"
    srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
	data-srcset="image3.jpg 600w,
		image1.jpg 220w,
	    image2.jpg 300w,
	    image4.jpg 900w"
	data-sizes="auto"
	class="lazyload" />

The noscript pattern

In case disabled JavaScript is a concern you can combine this simple pattern with an image inside a noscript element.

">
<style>
	.no-js img.lazyload {
    	display: none;
    }
style>


<noscript>
	<img src="image.jpg" />
noscript>
<img src="transparent.jpg" data-src="image.jpg" class="lazyload" />

Note: As an alternative to the noscript pattern also checkout the noscript extension.

[data-expand] attribute

Normally lazysizes will expand the viewport area to lazy preload images/iframes which might become visible soon. This value can be adjusted using the expand option.

Additionally, this general option can be overridden with the data-expand attribute for each element. Different than the general expand option the data-expand attribute also accepts negative values (All numbers but 0 are accepted!).

This becomes especially handy to add unveiling effects for teasers or other elements:

Teaser Title

...

">
<style>
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}
style>

<div class="teaser lazyload" data-expand="-20">
    <img data-src="image.jpg" class="lazyload" />
    <h1>Teaser Titleh1>
    <p>...p>
div>

CSS API

lazysizes adds the class lazyloading while the images are loading and the class lazyloaded as soon as the image is loaded. This can be used to add unveil effects:

/* fade image in after load */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}
/* fade image in while loading and show a spinner as background image (good for progressive images) */

.lazyload {
	opacity: 0;
}

.lazyloading {
	opacity: 1;
	transition: opacity 300ms;
	background: #f7f7f7 url(loader.gif) no-repeat center;
}

Broken image symbol

In case you are using an alt attribute but do not declare a src/srcset attribute you will end up with a broken image symbol.

There are two easy ways to deal with it.

Either define a src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" or add the following CSS.

img.lazyload:not([src]) {
	visibility: hidden;
}

JS API

lazysizes automatically detects new elements with the class lazyload so you won't need to call or configure anything in most situations.

JS API - options

Options can be set by declaring a global configuration option object named lazySizesConfig. This object must be defined before the lazysizes script. A basic example:

window.lazySizesConfig = window.lazySizesConfig || {};

// use .lazy instead of .lazyload
window.lazySizesConfig.lazyClass = 'lazy';

// use data-original instead of data-src
lazySizesConfig.srcAttr = 'data-original';

//page is optimized for fast onload event
lazySizesConfig.loadMode = 1;

In case you are using a module bundler it is recommended to change the options directly after importing the lazysizes module:

import lazySizes from 'lazysizes';
// other imports ...

lazySizes.cfg.lazyClass = 'lazy';

Here the list of options:

  • lazySizesConfig.lazyClass (default: "lazyload"): Marker class for all elements which should be lazy loaded (There can be only one class. In case you need to add some other element, without the defined class, simply add it per JS: $('.lazy-others').addClass('lazyload');)
  • lazySizesConfig.preloadAfterLoad (default: false): Whether lazysizes should load all elements after the window onload event. Note: lazySizes will then still download those not-in-view images inside of a lazy queue, so that other downloads after onload are not blocked.)
  • lazySizesConfig.preloadClass (default: "lazypreload"): Marker class for elements which should be lazy pre-loaded after onload. Those elements will be even preloaded, if the preloadAfterLoad option is set to false. Note: This class can be also dynamically set ($currentSlide.next().find('.lazyload').addClass('lazypreload');).
  • lazySizesConfig.loadingClass (default: "lazyloading"): This class will be added to img element as soon as image loading starts. Can be used to add unveil effects.
  • lazySizesConfig.loadedClass (default: "lazyloaded"): This class will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles.
  • lazySizesConfig.expand (default: 370-500): The expand option expands the calculated visual viewport area in all directions, so that elements can be loaded before they become visible. The default value is calculated depending on the viewport size of the device. (Note: Reasonable values are between 300 and 1000 (depending on the expFactor option.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to 0 if the browser is currently downloading and expand it if the browser network is currently idling and the user not scrolling (by multiplying the expand option with 1.5 (expFactor)). This option can also be overridden with the [data-expand] attribute.
  • lazySizesConfig.minSize (default: 40): For data-sizes="auto" feature. The minimum size of an image that is used to calculate the sizes attribute. In case it is under minSize the script traverses up the DOM tree until it finds a parent that is over minSize.
  • lazySizesConfig.srcAttr (default: "data-src"): The attribute, which should be transformed to src.
  • lazySizesConfig.srcsetAttr (default: "data-srcset"): The attribute, which should be transformed to srcset.
  • lazySizesConfig.sizesAttr (default: "data-sizes"): The attribute, which should be transformed to sizes. Makes almost only makes sense with the value "auto". Otherwise, the sizes attribute should be used directly.
  • lazySizesConfig.customMedia (default: {}): The customMedia option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the source[media] attribute (content/structure) by creating labeled media queries. (See also the custommedia extension).
  • lazySizesConfig.loadHidden (default: true): Whether to load visibility: hidden elements. Important: lazySizes will load hidden images always delayed. If you want them to be loaded as fast as possible you can use opacity: 0.001 but never visibility: hidden or opacity: 0.
  • lazySizesConfig.ricTimeout (default: 0): The timeout option used for the requestIdleCallback. Reasonable values between: 0, 100 - 1000. (Values below 50 disable the requestIdleCallback feature.)
  • lazySizesConfig.throttleDelay (default: 125): The timeout option used to throttle all listeners. Reasonable values between: 66 - 200.
image with artdirection ">
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
    '--small': '(max-width: 480px)',
    '--medium': '(max-width: 900px)',
    '--large': '(max-width: 1400px)',
};
script>


<picture>
	
	<source
		data-srcset="http://placehold.it/500x600/11e87f/fff"
		media="--small" />
	<source
		data-srcset="http://placehold.it/700x300"
		media="--medium" />
	<source
		data-srcset="http://placehold.it/1400x600/e8117f/fff"
		media="--large" />
	<source
        data-srcset="http://placehold.it/1800x900/117fe8/fff" />
    
    <img

        data-src="http://placehold.it/1400x600/e8117f/fff"
        class="lazyload"
        alt="image with artdirection" />
picture>
  • lazySizesConfig.expFactor (default: 1.5): The expFactor is used to calculate the "preload expand", by multiplying the normal expand with the expFactor which is used to preload assets while the browser is idling (no important network traffic and no scrolling). (Reasonable values are between 1.5 and 4 depending on the expand option).
  • lazySizesConfig.hFac (default: 0.8): The hFac (horizontal factor) modifies the horizontal expand by multiplying the expand value with the hFac value. Use case: In case of carousels there is often the wish to make the horizontal expand narrower than the normal vertical expand option. Reasonable values are between 0.4 - 1. In the unlikely case of a horizontal scrolling website also 1 - 1.5.
  • lazySizesConfig.loadMode (default: 2): The loadMode can be used to constrain the allowed loading mode. Possible values are 0 = don't load anything, 1 = only load visible elements, 2 = load also very near view elements (expand option) and 3 = load also not so near view elements (expand * expFactor option). This value is automatically set to 3 after onload. Change this value to 1 if you (also) optimize for the onload event or change it to 3 if your onload event is already heavily delayed.
  • lazySizesConfig.init (default: true): By default lazysizes initializes itself, to load in view assets as soon as possible. In the unlikely case you need to setup/configure something with a later script you can set this option to false and call lazySizes.init(); later explicitly.

JS API - events

lazysizes provides three events to modify or extend the behavior of lazysizes.

  • lazybeforeunveil: This event will be fired on each lazyload element right before of the "unveil" transformation. This event can be used to extend the unveil functionality. In case the event is defaultPrevented the default transformation action will be prevented (see also the ls.unveilhooks.js plugin):
$(document).on('lazybeforeunveil', function(){ var ajax = $(e.target).data('ajax'); if(ajax){ $(e.target).load(ajax); } }); ">
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});
//or add AJAX loading
//
  
$(document).on('lazybeforeunveil', function(){ var ajax = $(e.target).data('ajax'); if(ajax){ $(e.target).load(ajax); } });

The lazybeforeunveil can also be used for lazy initialization and due to the fact that lazysizes also detects new elements in the DOM automatically also for auto- and self-initialization of UI widgets:

">
<script>
document.addEventListener('lazybeforeunveil', function(e){
    $(e.target)
        .filter('.slider')
        .slider({
            sliderOption: true
        })
    ;
});

document.addEventListener('lazybeforeunveil', function(e){
    $(e.target)
        .filter('.chart')
        .chart({
            animate: true
        })
    ;
});
script>

<div class="slider lazyload lazypreload">div>

<div class="chart lazyload" data-expand="-10">div>
  • lazyloaded: After the image is fully loaded lazysizes dispatches a lazyloaded event. While this often duplicates the native load event it is often more convenient to use.

  • lazybeforesizes: This event will be fired on each element with the data-sizes="auto" attribute right before the calculated sizes attribute will be set. The event.detail.width property is set to the calculated width of the element and can be changed to any number. In case the event is defaultPrevented the sizes attribute won't be set. See also the parent-fit extension.

$(document).on('lazybeforesizes', function(e){
    //use width of parent node instead of the image width itself
    e.detail.width = $(e.target).parents(':not(picture)').innerWidth() || e.detail.width;
});

JS API - methods

lazySizes.loader.unveil(DOMNode)

In case a developer wants to show an image even if it is not inside the viewport the lazySizes.loader.unveil(DOMNode) can be called:

lazySizes.loader.unveil(imgElem);

Note: As a more lazy alternative the lazypreload class can be set: $(imgElem).addClass('lazypreload');.

lazySizes.autoSizer.checkElems()

In case one or more image elements with the attribute data-sizes="auto" have changed in size lazySizes.autoSizer.updateElems can be called (For example to implement element queries):

lazySizes.autoSizer.checkElems();
lazySizes.loader.checkElems()

Tests whether new elements has came into view. Normally this method only needs to be called, if lazySizesConfig.loadMode was set to 0.

lazySizes.init()

LazySizes initializes itself automatically. In case you set lazySizesConfig.init to false you need to explicitly call lazySizes.init(). Note: You can speed up initial loading of in view images if you call lazySizesConfig.init() explicitly after lazysizes and all plugins are loaded.

">
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.init = false;
script>

<script src="lazysizes.js">script>
<script src="other-script.js">script>
<script>
lazySizes.init();
script>

Browser Support

lazysizes supports all browsers, that support document.getElementsByClassName (== all browsers but not IE8-). In case you need to support IE8, see also the noscript extension (or use a modified noscript pattern or the LQIP pattern).

Contributing

Fixes, PRs and issues are always welcome, make sure to create a new branch from the master (not the gh-pages branch), validate against JSHint and test in all browsers. In case of an API/documentation change make sure to also document it here in the readme.md.

Build

Run npx grunt to validate JSHint and uglify/minify all files.

Tests

Run npx serverino -p 3333 and navigate to http://localhost:3333/tests/

Available plugins in this repo

It is recommended to concat all plugins together with lazySizes. In case you don't concat it is recommended to include the plugin scripts before the lazySizes main script.

respimg polyfill plugin

The respimg polyfill plugin is an extremely lightweight alternate polyfill for the most important subsets of responsive images (srcset and picture).

OPTIMUMX plugin

The srcset attribute with the w descriptor and sizes attribute automatically also includes high DPI images. But each image has a different optimal pixel density, which might be lower (for example 1.5x) than the pixel density of your device (2x or 3x). This information is unknown to the browser and therefore can't be optimized for. The lazySizes optimumx extension gives you more control to trade between perceived quality vs. perceived performance.

parent-fit extension

The parent fit plugin extends the data-sizes="auto" feature to also calculate the right sizes for object-fit: contain|cover image elements and other height ( and width) constrained image elements in general.

object-fit polyfill extension

The object fit polyfill plugin polyfills the object-fit and the object-position property in non supporting browsers.

blur up / effect plugin

The blur up / effect plugin allows you to create great over fade / blur up effects with low quality image placeholder, which improves the user experience and perceived performance in case you are using a low quality image approach.

attrchange / re-initialization extension (strongly recommended if you use React, Angular etc.)

In case you are changing the data-src/data-srcset attributes of already transformed lazyload elements, you must normally also re-add the lazyload class to the element.

This attrchange / re-initialization extension automatically detects changes to your data-* attributes and adds the class for you.

artdirect plugin

The artdirect plugin allows you to fully control art direction via CSS.

Other plugins/extensions

There are also other plugins/extension in the plugins folder. As always you are open to create new ones for your project.

Tip: Specifying image dimensions (minimizing reflows and avoiding page jumps)

To minimize reflows, content jumping or unpredictable behavior with some other JS widgets (isotope, masonry, some sliders/carousels...) the width and the height of an image should be calculable by the browser before the image source itself is loaded:

">
<img

    style="width: 350px; height: 150px;"
	data-srcset="http://placehold.it/350x150 1x,
    http://placehold.it/700x300 2x"
    data-src="http://placehold.it/350x150"
    class="lazyload" />

For flexible responsive images the CSS intrinsic ratio scaling technique should be used:

">
<style>
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 42.86%;
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
style>

<div class="ratio-container">
    <img

        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
div>

In case you want to dynamically calculate your intrinsic ratios for many different formats you can vary the pattern to something like this:

">
<style>
.ratio-box {
	position: relative;
	height: 0;
	display: block;
	width: 100%;
	/* padding-bottom is calculated and rendered in to HTML */
}

.ratio-box img,
.ratio-box iframe,
.ratio-box video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
style>

<div class="ratio-box" style="padding-bottom: 42.85% /* calc(75 / 175 * 100%)*/;">
    <img

        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
div>

In case the exact ratio of your image is unknown you can also vary the intrinsic ratio like this:

* { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* unknown ration variation */ .unknown-ratio-container > * { max-width: 100%; max-height: 100%; width: auto; height: auto; }
">
<style>
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 56.25%;
    content: "";
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* unknown ration variation */
.unknown-ratio-container > * {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
style>

<div class="ratio-container unknown-ratio-container">
    <img

        data-src="http://placehold.it/350x150"
        class="lazyload" />
div>

or at least add a min-height (and min-width) to minimize content jumps:

.lazyload,
.lazyloading {
	min-height: 200px;
}

Note:

  • If you use the "unknown intrinsic ratio pattern" and the width of the loaded image will not (approximately) match the width of its container, the data-sizes="auto" feature will not be effective when used on its own. In this situation, the most appropriate size for the image to fit in the available space can be calculated automatically using the parent fit plugin.

Updating layout of JS widgets

In case you can't specify the image dimensions using CSS or one of the above suggested methods and your JS widgets have problems to calculate the right dimensions. You can use the following pattern to update your JS widgets (sliders/masonry):

$('.my-widget').each(function(){
    var $module = $(this);
    var update = function(){
        $module.myWidget('updateLayout');
    };

    // Note: Instead of waiting for all images until we initialize the widget
    // we use event capturing to update the widget's layout progressively.
    this.addEventListener('load', update, true);

    $module.myWidget();
});

For this update pattern you may want to combine this at least with the min-height pattern explained above.

Tip: Where/How to include lazySizes

While lazy loading is a great feature, it is important for users that crucial in view images are loaded as fast as possible. (Most users start to interact with a page after in view images are loaded.)

In case you normally combine all your scripts into one large script and add this to the bottom of your page, it can be better for perceived performance to generate two or sometimes more script packages: One small package, which includes all scripts which have heavy influence on the content or the UI and another larger one which includes the normal behavior of the page.

This smaller script, which should include lazySizes (and all its plugins), should then be placed before any other blocking elements (i.e.: script(s)) at the end of the body or after any blocking elements (i.e.: scripts, stylesheets) in the head to load the crucial content as fast possible. (Note: It might make also sense to call lazySizes.init(); explicitly right after lazySizes and all its plugins are added.)

Why lazysizes

In the past, I often struggled using lazy image loaders, because the "main check function" is called repeatedly and with a high frequency. Which makes it hard to fulfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers...

But in a world of responsive retina optimized images on the one hand and JS widgets like carousels or tabs (a lot of initially hidden images) on the other hand lazy loading images becomes more and more important, so I created this project.

lazysizes is different:

Due to the fact, that it is designed to be invoked with a high frequency and therefore works highly efficient, it was possible to hook into all kinds of events as a mutationobserver meaning this lazyloader works as a simple drop in solution - you simply write/render your markup and no matter whether the .lazyload element was added by AJAX or revealed by a JS or CSS animation it will be picked up by lazysizes.

">

<img
	data-sizes="auto"

	data-srcset="image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w"
    data-src="image3.jpg"
    class="lazyload" />


<img
    data-src="image.jpg"
    class="lazyload" />
Issues
  • Some images with lazyload class sometimes get stuck in the lazyloading state

    Some images with lazyload class sometimes get stuck in the lazyloading state

    Some images with lazyload class in some cases get sucked in the laziloading state with the laziloading class, and they never get the lazyloaded class. However the images are loaded by the browser, but they are not displayed.

    opened by kireerik 40
  • slow loading when scrolling on wheel (Chrome/Opera)

    slow loading when scrolling on wheel (Chrome/Opera)

    When I scroll a page by mouse wheel, images loading with delay about 3sec. But when I drag scroll bar images loading instantly. This problem is in chrome and opera, in firefox is ok.

    opened by Youfka 29
  • Unexpectedly high usage on espn.com

    Unexpectedly high usage on espn.com

    The espn.com redesign uses lazysizes...

    But from what what I can tell its running checkElements VERY often. If the homepage is up, just scrolling it around a bit will end up calling checkElements >80 times in like 15 seconds.

    I'm using this to check btw: image

    I don't think this is expected behavior. Maybe you could look into this?

    opened by paulirish 24
  • BGSet - not working in ie11

    BGSet - not working in ie11

    It appears that when I am using bgset along with lazy sizes, IE11 does not load the lazy image after I reload the page a couple of times. The lazy load script does get fired as I can see the class name change to loaded. Please advise.

    opened by cdwebdev 23
  • LQIP technique using css background images

    LQIP technique using css background images

    Hi,

    first of all, congratulations for this awesome plugin! Very nice work. I would like to ask you if is possible to use LQIP technique while using background images instead of img tags. For now, I'm using jQuery Cover plugin (https://github.com/greenish/jquery-cover), but it would be great to have this feature out of the box. The advantage of using background images with css is that you can have cover mode support without additional scripts.

    Thanks Hugo

    opened by HybridSolutions 22
  • Acting weirdly in the latest firefox v36.0.1

    Acting weirdly in the latest firefox v36.0.1

    Hey guys, First of all thanks a lot for this awesome script. I've been testing your plugin thoroughly and the lazy load works perfectly on chrome and opera, but in firefox it work very weirdly. I've using this lazysize on the wordpress site using the WP Retix Pro plugin (https://wordpress.org/plugins/wp-retina-2x/) which is incorporated with lazysize. A lot of image doesn't load. Even if it is at the top of the page.

    I've contacted the plugin author @tigroumeow but he said that there is no problem with the plugin end. So I would be glad if someone from the lazysize team take a look at this issue.

    As my site is a live site and many people visit it every second, I cant keep the issue on the live site to show you guys. So I have deactivated lazysize for now until the issue got fixed. Instead I've screencasts a video where you will see the issue in details https://www.youtube.com/watch?v=43DnBAEk3po&hd=1

    I'll be really greatful if someone can help me with this.

    opened by isaumya 20
  • scrolling on chrome - image does not load until the viewport stops scrolling

    scrolling on chrome - image does not load until the viewport stops scrolling

    I've checked out the demo and tested it on my mobile chrome http://afarkas.github.io/lazysizes/#examples

    It appears the behavior for lazy loading is to start loading the image only after the view port have stop scrolling. It's quite an awkward experience because users will have to stop scrolling and wait for the images to load, rather than scroll and have the images start loading in parallel while the page is still scrolling.

    opened by geekyme 19
  • Prevent upscaling when using data-sizes=

    Prevent upscaling when using data-sizes="auto"

    <img
        data-sizes="auto"
        src="lqip-src.jpg"
        data-srcset="lqip-src.jpg 220w,
        image2.jpg 300w,
        image3.jpg 600w,
        image4.jpg 900w" class="lazyload" />
    

    E.g. when the image will be shown at a width of 320px, lazysizes will set sizes="320px". Great. But now the browser/polyfill chooses the 300px image and upscales it to 320px. The result is a blurry image. Wouldn't it be better, if lazysizes would (maybe via a config parameter) set sizes="600px" in this case? Of course this will result in more data to be transferred, but downscaling usually looks much better than upscaling.

    opened by jschroeter 17
  • 'lazyafterunveil' callback?

    'lazyafterunveil' callback?

    I can't seem to find anything to this effect in the documentation.

    Is it possible to have a callback fire after the image has been lazyloaded?

    opened by CSergienko 17
  • img with absolute / min-width positioning increases `sizes` attr on scroll

    img with absolute / min-width positioning increases `sizes` attr on scroll

    This issue happens when positioning images in set width/height containers using position: absolute and width/height, min-width/-height, max-width/-height etc. so as to mimic object-fit: cover (because object-fit is not supported in IE). There are two problems:

    1. the wrong size often seems to be chosen (too big); but worse is
    2. on iOS when scrolling, the sizes attribute continues to be updated: causing ever-larger images to be loaded (adding bandwidth), and causing the image to 'zoom in' until unrecognizable (when it arrives at the largest source).

    Please see the debug view, on iOS or Simulator: http://s.codepen.io/lunelson/debug/EKjKKj

    Pen here: http://codepen.io/lunelson/pen/EKjKKj

    opened by lunelson 16
  • Access source attributes in lazyriasmodifyoptions

    Access source attributes in lazyriasmodifyoptions

    Describe your problem/question Currently, I am calculating available sizes based on image width/height and aspect ratio. This is an issue when using a picture element with source within.

    Make it reproduce-able https://jsfiddle.net/5k6evx18/1/ Check console. It only logs 0.5 for the img element.

    question 
    opened by andershagbard 0
  • Getting error when doing npm install lazysizes --save

    Getting error when doing npm install lazysizes --save

    D:\Projects\NUXT_FULLPAGE-LAZYLOAD\lazyload-fullpage-app> npm install lazysizes --save
    
    > [email protected] install D:\Projects\NUXT_FULLPAGE-LAZYLOAD\lazyload-fullpage-app\node_modules\weak
    > node-gyp rebuild
    
    
    D:\Projects\NUXT_FULLPAGE-LAZYLOAD\lazyload-fullpage-app\node_modules\weak>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild ) 
    Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
      weakref.cc
      win_delay_load_hook.cc
    d:\projects\nuxt_fullpage-lazyload\lazyload-fullpage-app\node_modules\weak\src\weakref.cc(147): error C2660: 'v8::Func
    tion::Call': function does not take 3 arguments [D:\Projects\NUXT_FULLPAGE-LAZYLOAD\lazyload-fullpage-app\node_modules
    \weak\build\weakref.vcxproj]
      c:\users\supriya gorai\appdata\local\node-gyp\cache\14.17.4\include\node\v8.h(4468): note: see declaration of 'v8::F 
      unction::Call' (compiling source file ..\src\weakref.cc)
    d:\projects\nuxt_fullpage-lazyload\lazyload-fullpage-app\node_modules\weak\src\weakref.cc(168): error C2660: 'v8::Obje 
    ctTemplate::NewInstance': function does not take 0 arguments [D:\Projects\NUXT_FULLPAGE-LAZYLOAD\lazyload-fullpage-app 
    \node_modules\weak\build\weakref.vcxproj]
      c:\users\supriya gorai\appdata\local\node-gyp\cache\14.17.4\include\node\v8.h(6762): note: see declaration of 'v8::O 
      bjectTemplate::NewInstance' (compiling source file ..\src\weakref.cc)
    d:\projects\nuxt_fullpage-lazyload\lazyload-fullpage-app\node_modules\weak\src\weakref.cc(223): error C2039: 'IsNearDe 
    ath': is not a member of 'Nan::Persistent<v8::Object,v8::NonCopyablePersistentTraits<T>>' [D:\Projects\NUXT_FULLPAGE-L 
    AZYLOAD\lazyload-fullpage-app\node_modules\weak\build\weakref.vcxproj]
              with
              [
                  T=v8::Object
              ]
      d:\projects\nuxt_fullpage-lazyload\lazyload-fullpage-app\node_modules\nan\nan.h(1990): note: see declaration of 'Nan 
      ::Persistent<v8::Object,v8::NonCopyablePersistentTraits<T>>'
              with
              [
                  T=v8::Object
              ]
    gyp ERR! build error 
    gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
    gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:194:23)
    gyp ERR! stack     at ChildProcess.emit (events.js:400:28)
    gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
    gyp ERR! System Windows_NT 10.0.19043
    gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
    gyp ERR! cwd D:\Projects\NUXT_FULLPAGE-LAZYLOAD\lazyload-fullpage-app\node_modules\weak
    gyp ERR! node -v v14.17.4
    gyp ERR! node-gyp -v v5.1.0
    gyp ERR! not ok
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\rollup-watch\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\weak):
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-gyp rebuild`
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
    
    + [email protected]
    updated 1 package and audited 1367 packages in 9.544s
    
    99 packages are looking for funding
      run `npm fund` for details
    
    found 9 vulnerabilities (1 low, 3 moderate, 4 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details
    

    Getting this . How to fix

    bug 
    opened by SupriyaGo 0
  • Blur up on background images with unveilhooks

    Blur up on background images with unveilhooks

    Is it possible to fade in the high quality image using the LQIP technique with unveilhooks for background images? I'm using something like this:

    <div class="lazyload" data-bg="public/images/bg.jpg" style="background-image: url('public/images/bg-low.jpg');"></div>

    question 
    opened by Moucky 0
  • Can i use css spinner loading while the image is Lazy loaded?

    Can i use css spinner loading while the image is Lazy loaded?

    Hey. I hope you response my question. I wanna know if i can handle a spinner load while images are Lazy loading

    question 
    opened by matinwd 1
  • Lazyload iframes by replacing them

    Lazyload iframes by replacing them

    Hi, Thank you for this wonderful plugin which works very well and out of the box for images. We faced an issue similar to this while trying to lazyload iframes. We do not want to add a history entry as suggested here. What if we remove the iframe and re-construct as mentioned here ?

    opened by sudharsan-p 0
  • Is there any method to download files sequentially? (with preloadAfterLoad)

    Is there any method to download files sequentially? (with preloadAfterLoad)

    I want to files downloaded and shown in sequential order, but also I want them preloaded even they are not in viewport.

        useEffect(() => {
            lazySizes.cfg.preloadAfterLoad = true
        }, [])
    

    set preloadAfterLoad = true makes several files downloaded at the same time, but I want make them one by one (one file after previous file, in order of images i set with lazysizes)

    please note that i'm rendering images like this

                    props.imgs.map((d, i) => (
                        <Image
                            key={`img${i}`}
                            className='lazyload'
                            data-src={`${d}`}
                            ref={el => props.imageRef.current?.push(el)}
                            onError={props.reloadImage}
                        />
                    ))
    // Image: img tag customed with styled-components
    

    is there any way I can do it?

    question 
    opened by prunusnira 0
  • Layout shift with picture tag where each source has a different aspect-ratio using own width and height value

    Layout shift with picture tag where each source has a different aspect-ratio using own width and height value

    Describe the bug Trying to use responsive images with different aspect ratios (desktop/mobile), setting dimensions on source tags without using padding-top CSS hacks.

    To Reproduce https://www.gelestatic.it/cless/common/test.html

    Steps to reproduce the behavior: Mobile Viewport Chrome Mobile - fast 3g connection

    What is the expected behavior: The browser should correctly calculate the aspect ratio from the width and height set on the source tag for both the first image (no lazyload) and the second (lazyload)

    What happened instead: The first image is ok. The second image has a Layout Shift.

    In what environment (browser/device etc.) does this bug happen/not happen: macOS Big Sur - Google Chrome Version 93

    Keywords help others to find this issue: Core Web Vitals - Cumulative Layout Shift

    ⚠️ Search for existing open/closed issues/discussions before you report the issue. ⚠️ If you do not provide enough information to reproduce your bug. We won't be able to work on the issue. In most cases just providing a fraction of your code is not enough!

    bug 
    opened by romaviolenta 0
  • Always loading largest size

    Always loading largest size

    We have implemented lazy sizes on the header image here: https://www.star-registration.com/pages/sympathy-gift-for-funeral unfortunately, it always loads the 900px image no matter the device width.

    I already tried to remove all css classes, set data-aspectratio and every other quickfix that can be found on the internet. Any help would be appreciated

    bug 
    opened by marcmayo 1
  • How to deal if internet connection failed

    How to deal if internet connection failed

    How can i manage when user lost internet connection and keep scrolling ? i would like to keep original src file and not to be replaced i tried with code below but its keep senging it nonstop

    document.addEventListener('error', function(e){ if(e.target.nodeName == 'IMG'){e.target.src = 'placeholder.jpg';} }, true);

    question 
    opened by PiklioBezGashti 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(5.3.1)
Owner
Alexander Farkas
Alexander Farkas
React Component to lazy load images and components using a HOC to track window scroll position.

React Component to lazy load images and other components/elements. Supports IntersectionObserver and includes a HOC to track window scroll position to improve performance.

Albert Juhé Lluveras 898 Jan 21, 2022
Lazy load & transition your React images with some WebGL glsl niceness 🎉

react-gl-transition-image ?? Lazy load & transition your React images with some WebGL glsl niceness ?? . Easy to use, offers 8 different transitions o

Jakob Stasilowicz 73 Dec 6, 2021
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 23.1k Jan 15, 2022
📶 Improved lazy loading in React with suspense and error boundary

react-with-dynamic About Improved lazy loading in React with suspense and error boundary Demo Basic With Context How to Install First, install the lib

Jakub Biesiada 0 Dec 29, 2021
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO Next SEO is a plugin that makes managing your SEO easier in Next.js projects. Pull requests are very welcome. Also make sure to check out the

Gary Meehan 4.3k Jan 21, 2022
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Vladimir Kharlampidi 1.1k Jan 13, 2022
A Simple, ATS friendly and Fast Resume Builder React App

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Mohit kumar 1 Dec 29, 2021
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.4k Jan 17, 2022
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

null 417 Jan 16, 2022
Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.

Flame Description Flame is self-hosted startpage for your server. Its design is inspired (heavily) by SUI. Flame is very easy to setup and use. With b

null 1.5k Jan 17, 2022
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO.

React Headings Never worry about using the wrong heading level (h1, h2, etc.) in complex React apps! React-headings maintains the proper hierarchy of

Alex Nault 29 Jan 5, 2022
:zap: RAN! React . GraphQL . Next.js Toolkit :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...

RAN : React . GraphQL . Next.js Toolkit New version is coming... Follow up here: https://github.com/Sly777/ran/issues/677 Features Hot-Reload Ready fo

Ilker Guller 2.1k Jan 17, 2022
⚗️ Treat your `` components for better SEO and UX.

react-link-filter ⚗️ Treat your <NavLink /> components for better SEO and UX. Opens all external links in a new tab/window with rel="nofollow noopener

null 1 Jul 19, 2019
📝 Self-configuring product tour library for React

React Spotlight Tour A self-configuring tutorial library for React. Blog | Docs | Demo | npm Features Clean and unobtrusive overlay to highlight the i

Revere CRE 6 Dec 28, 2021
Self-hosting web code editor (for Hack Club CodeJelly)

reflection Self-hosting web code editor (for Hack Club CodeJelly) Reflection edi

Benjamin Smith 7 Dec 29, 2021
Animo-demo - Animo Self-Sovereign Identity Demo build using Aries Framework Javascript

Animo Self-Sovereign Identity Demo ✨ Hi there! Welcome to the repository of Anim

Animo 4 Jan 15, 2022
Domain-monitor - Self-hosted React SPA for monitoring domain names

Domain Monitor Domain Monitor is a React single-page application for tracking do

Simon Tunaitis 1 Jan 13, 2022
:deciduous_tree: [email protected], Styled-jsx, TypeScript, Jest, SEO

Next.js TypeScript Starter Kit see ChangeLog Feature TypeScript Styled-jsx Module css (PostCSS - cssnext, nested, import) SEO & analytics(Google Analy

Bonggyun Lee 340 Jan 17, 2022
Fast, open and free-to-use new tab page for modern browsers

Mue Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers. Table of contents Scre

Mue 225 Jan 15, 2022
A blazing fast, dependency free, 1kb runtime type-checking library written entirely in typescript, meant to be used with it.

A blazing fast, dependency free, 1kb runtime type-checking library written entirely in typescript, meant to be used with it.

Gabriel Vaquer 67 Jan 5, 2022
🥢 A minimalist-friendly ~1.3KB routing for React and Preact. Nothing else but HOOKS.

wouter is a tiny router for modern React and Preact apps that relies on Hooks. A router you wanted so bad in your project! Features Zero dependency, o

Alexey Taktarov 3.8k Jan 21, 2022
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Jean Verster 238 Jan 17, 2022
A fully mocked and test-friendly version of react native

Interested in helping maintain react-native-mock? Reach out! react-native-mock A fully mocked and test-friendly version of react native Requirements N

Jake Howard 571 Dec 12, 2021
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 9.8k Jan 17, 2022
Mobile-friendly gallery carousel 🎠🎠🎠 with batteries included (touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard navigation and customisations).

react-gallery-carousel Mobile-friendly Carousel with batteries included (supporting touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL,

Yifan Ai 169 Jan 10, 2022
⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.

ScoutBar ⌨️ Spolight for your app See Demo On Codesandbox See Documentation ⚡️ Overview Users enjoy hitting CMD + K to search and perform complex acti

Adenekan Wonderful 69 Jan 13, 2022
Document your Typescript React components with TSDoc and export into Storybook-friendly JSON 🤖

react-tsdoc react-tsdoc is an WIP tool to extract information from React Typescript component files with TSDoc for documentation generation purposes t

Noah Buscher 4 Jan 13, 2022
Collection of beginner-friendly real world examples of hook usage.

Hooks. People love them, people hate them. But one is for sure - hooks are there to stay and React ecosystem is going to evolve, again. The most impor

Sergey Ryzhov 133 Oct 14, 2021
Vegetarian friendly state for React

Vegetarian friendly state for React Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience. It allows

Sean Matheson 4.6k Jan 21, 2022