All Projects → ivopetkov → Responsively Lazy

ivopetkov / Responsively Lazy

Lazy load responsive images

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Responsively Lazy

jekyll-loading-lazy
🧙🏽‍♀️ Automatically adds loading="lazy" to <img> and <iframe> tags. Load images on your sites lazily without JavaScript.
Stars: ✭ 41 (-96.2%)
Mutual labels:  lazy, lazyload, lazy-loading
lazy-load-images.js
Progressive & lazy loading images.
Stars: ✭ 17 (-98.43%)
Mutual labels:  lazy, lazyload, lazy-loading
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+510.74%)
Mutual labels:  webp, lazy-loading, lazyload
Accessible Image Lazy Load
😴 gandul! accessible lazy loading images
Stars: ✭ 281 (-73.98%)
Mutual labels:  lazy-loading, lazyload, lazy
Jquery.lazy
A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.
Stars: ✭ 965 (-10.65%)
Mutual labels:  lazy-loading, lazyload, lazy
Nuxt Lazysizes
Lazysizes module for Nuxt.js
Stars: ✭ 25 (-97.69%)
Mutual labels:  lazy-loading, lazyload
rocket-lazy-load
Standalone LazyLoad plugin for WordPress (based on WP Rocket)
Stars: ✭ 25 (-97.69%)
Mutual labels:  lazyload, lazy-loading
loadeer
🦌 Tiny, performant, SEO-friendly lazy loading library
Stars: ✭ 30 (-97.22%)
Mutual labels:  lazyload, lazy-loading
lazyImages
基于ES6的轻量级,高性能,简便的图片懒加载 🐈
Stars: ✭ 43 (-96.02%)
Mutual labels:  lazy, lazy-loading
Ng In Viewport
Allows us to check if an element is within the browsers visual viewport
Stars: ✭ 178 (-83.52%)
Mutual labels:  lazy-loading, lazyload
lazysimon
Minimal effort 350 byte JavaScript library to lazy load all <img> on your website
Stars: ✭ 18 (-98.33%)
Mutual labels:  lazyload, lazy-loading
Ng Lazy Load
Lazy loading images with Angular.
Stars: ✭ 12 (-98.89%)
Mutual labels:  lazyload, lazy
guide-to-async-components
📖 Guide To JavaScript Async Components
Stars: ✭ 79 (-92.69%)
Mutual labels:  lazyload, lazy-loading
relaze
Tiny image lazy loading library for React.
Stars: ✭ 20 (-98.15%)
Mutual labels:  lazy, lazy-loading
React Progressive Loader
Utility to load images and React components progressively, and get code splitting for free
Stars: ✭ 224 (-79.26%)
Mutual labels:  lazy-loading, lazyload
Zsh Lazyload
zsh plugin for lazy load commands and speed up start up time of zsh
Stars: ✭ 33 (-96.94%)
Mutual labels:  lazyload, lazy
Lozad.js
🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
Stars: ✭ 6,932 (+541.85%)
Mutual labels:  lazy-loading, lazyload
Pimg
📷 Mini Image Lazy Loader for P(R)eact and Vue
Stars: ✭ 97 (-91.02%)
Mutual labels:  lazy-loading, lazy
React Lazy
Universal lazy loader components using IntersectionObserver for React
Stars: ✭ 118 (-89.07%)
Mutual labels:  lazy-loading, lazyload
magento2-catalog-lazy-load
Improve the load time of your Magento 2 categories pages by loading your images on demand with our Lazy Load Extension
Stars: ✭ 56 (-94.81%)
Mutual labels:  lazyload, lazy-loading

Responsively Lazy

The best lazy loading implementation available.

  • Handles responsive images
  • Truly lazy (absolutely no unnecessary requests)
  • SEO friendly (valid HTML)
  • Supports WebP

You can find a demo at http://ivopetkov.github.io/responsivelyLazy/ and learn how the magic works at http://ivopetkov.com/b/lazy-load-responsive-images/

Download and install

Download the minified css and js files or install through npm and bower

npm install responsively-lazy
bower install responsively-lazy

The library does not have any dependencies, and it's just 1.1kb gzipped and minified.

Usage

  • Include the css file in the head tag
<link rel="stylesheet" href="responsivelyLazy.min.css">
  • Include the js file right before the end of the body tag
<script async src="responsivelyLazy.min.js"></script>
  • Add the following code for each image
<div class="responsively-lazy" style="padding-bottom:68.44%;">
    <img alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>

The things to customize are the padding-bottom style, and the values of the src and data-srcset attributes. If you don't know the image aspect ratio you can skip the div tag and move the responsively-lazy class to te img tag:

<img class="responsively-lazy" alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

You can list image versions in the WebP format which will be used if the browser supports it.

A new concept

Responsively Lazy is very different from the other lazy loading libraries. They make you break your HTML by removing the src attribute, or make you put tiny version there or make you use <noscript> to make your images appear in Google Images. The following code has worked for ages:

<img src="image.jpg" />

Let's not break it when we can enhance it.

<img src="image.jpg" data-src="image-200.jpg 200w, image-400.jpg 400w" srcset="..." />

Browser support

The lazy loading works in browsers supporting the srcset attribute. As of December 2017 that's 86.78%. Unsupported browsers will load the image in the src attribute. That's the image search engines and social networks will find, so it's better to make it high resolution.

DOM changes

The library will listen for DOM changes and you can also trigger visible images loading by calling responsivelyLazy.run().

License

Free to use under the MIT license.

Got questions?

You can find me at @IvoPetkovCom and ivopetkov.com

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].