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.