lazyload-background-images
v1.0.2
Published
This package is designed to optimize your web app performance by lazy loading background images and avoiding the "defer background images" warning.
Downloads
5
Maintainers
Readme
lazyload-background-images
- This package is designed to optimize your web app performance by lazy loading background images and avoiding the "defer background images" warning.
Demo
Installation
- To install
lazyload-background-images
, simply run:
npm install lazyload-background-images
Usage
- Importing in app.js for React and Next.js
import "./App.css";
import { useEffect } from "react";
import lazyLoadBackgroundImages from "lazyload-background-images";
function App() {
useEffect(() => {
lazyLoadBackgroundImages();
}, []);
return (
<div className="App">
{/* Add 'defer-img' class to background image element */}
<div
className="defer-img bgImg"
style={{
backgroundImage: `url(https://wallpapercave.com/wp/wp2599594.jpg)`,
}}
>
Hello Nature
</div>
</div>
);
}
export default App;
Adding to global CSS
.defer-img {
background-image: none !important;
}
Notes
- By using lazyload-background-images, you can greatly improve your web app's performance and avoid the "defer background images" warning. Simply import the package and add the defer-img class to any background image elements. Don't forget to add the background-image property to the style attribute of your element. Finally, add the .defer-img CSS to your global CSS file.
License
- This package is released under the MIT License. See LICENSE for details.