Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
By Sarah Gooding - Feb 12, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
responsive-lazyload
Advanced tools
responsive-lazyload
A tool to lazyload images in a responsive, lightweight way (with fallbacks for unsupported browsers).
Lazyload Images Responsively
This package was inspired by https://github.com/ivopetkov/responsively-lazy/. It uses very similar markup, but significantly simplifies the way image replacement is handled under the hood. It also adds an optional fallback for when JavaScript is disabled.
Quick Start
Check out the examples for copy-pasteable code and more information about usage.
Option 1: Using a Build Tool
This example assumes webpack.
1. Install the module using npm.
npm install --save responsive-lazyload
2. Include the module and initialize lazyloading.
Load the module and initialize lazyloading in your app's script:
import responsiveLazyload from 'responsive-lazyload';
responsiveLazyload();
3. Include the stylesheet.
Include the following in the <head> of your document.
<link rel="stylesheet"
href="node_modules/responsive-lazyload/dist/responsive-lazyload.min.css">
4. Add a lazyloaded image to your markup.
Place the lazyload markup anywhere in your app's markup:
<div class="js--lazyload">
<img alt="a lazyloaded image"
src="http://placekitten.com/400/300"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="http://placekitten.com/400/300 1x,
http://placekitten.com/800/600 2x">
</div>
For more information and configuration options, see the examples.
Option 2: Using unpkg
NOTE: While unpkg is a fantastic tool, adding additional HTTP requests to your project will slow it down. For that reason, this approach is not recommended.
1. Include the script in your markup.
Just before the closing </body> tag, add the lazyloading script:
<script src="https://unpkg.com/responsive-lazyload/dist/responsive-lazyload.umd.js" defer></script>
2. Include the styles in your markup.
Include the following in the <head> of your document:
<link rel="stylesheet"
href="https://unpkg.com/responsive-lazyload/dist/responsive-lazyload.min.css">
3. Initialize lazyloading.
The initialization function is stored inside a global object called responsiveLazyload. Initialize lazyloading by adding the following just below the script include:
<script>
responsiveLazyload();
</script>
4. Add a lazyloaded image to your markup.
Place the lazyload markup anywhere in your app's markup:
<div class="js--lazyload">
<img alt="a lazyloaded image"
src="http://placekitten.com/400/300"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="http://placekitten.com/400/300 1x,
http://placekitten.com/800/600 2x">
</div>
For more information and configuration options, see the examples.
Markup
The markup to implement this is:
<div class="js--lazyload js--lazyload--loading">
<img alt="image description"
src="/images/image@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="/images/image-300x150.jpg 300w,
/images/image-600x300.jpg 600w,
/images/image.jpg 690w,
/images/image@2x.jpg 1380w">
</div>
Markup Details
- The classes can be changed, but must be updated in the call to
responsiveLazyload(). - The initial
srcsetis a blank GIF, which avoids an unnecessary HTTP request. - The actual
srcsetis added asdata-lazyload.
The way responsiveLazyload() works is to check if the image is inside the viewport, and — if so — swap out the srcset for the data-lazyload. This is much simpler than duplicating browser behavior to choose the optimal image size; instead, we just give the browser a srcset and let it do its thing.
On browsers that don’t support srcset, the regular src attribute is used, so this should degrade gracefully.
Markup With Fallback for Browsers Without JavaScript Enabled
To ensure that an image is still visible, even if JavaScript is disabled, add a <noscript> block with the properly marked up image using srcset without the lazyloading solution:
<div class="js--lazyload js--lazyload--loading">
<img alt="image description"
src="/images/image@2x.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-lazyload="/images/image-300x150.jpg 300w,
/images/image-600x300.jpg 600w,
/images/image.jpg 690w,
/images/image@2x.jpg 1380w">
<noscript>
<img alt="image description"
src="/images/image@2x.jpg"
srcset="/images/image-300x150.jpg 300w,
/images/image-600x300.jpg 600w,
/images/image.jpg 690w,
/images/image@2x.jpg 1380w">
</noscript>
</div>
JavaScript Options
To enable lazyloading, add the following to your initialization script:
import responsiveLazyload from 'responsive-lazyload';
responsiveLazyload({
containerClass: 'js--lazyload',
loadingClass: 'js--lazyload--loading',
callback: () => {},
});
| option | default | description |
|---|---|---|
containerClass | js--lazyload | Determines which elements are targeted for lazyloading. |
loadingClass | js--lazyload--loading | Applied to containers before loading. This is useful for adding loading animations. |
callback | () => {} | Fired on each image load. Useful for adding custom functionality after an image has loaded. |
Development
To run this module locally for development, follow these steps:
# Clone the repo.
git clone git@github.com:jlengstorf/responsive-lazyload.js.git
# Move into the repo.
cd responsive-lazyload.js/
# Install dependencies.
npm install
# Run the build script.
npm run build
Testing
Tests are built using Jest. Run them with:
npm test
# Or, to remove all the extra crap npm spits out and only show test output:
npm test --silent
FAQs
A tool to lazyload images in a responsive, lightweight way (with fallbacks for unsupported browsers).
The npm package responsive-lazyload receives a total of 72 weekly downloads. As such, responsive-lazyload popularity was classified as not popular.
We found that responsive-lazyload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 02 Jul 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
By Sarah Gooding - Feb 11, 2025
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025