Skip to content

Instantly share code, notes, and snippets.

@kenny-io

kenny-io/lazyloader.js

Created April 7, 2024 19:50
Show Gist options
  • Save kenny-io/f8895f89dac8bff8308a636a6eb9ee77 to your computer and use it in GitHub Desktop.
Save kenny-io/f8895f89dac8bff8308a636a6eb9ee77 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kenny-io created this gist Apr 7, 2024.
    15 changes: 15 additions & 0 deletions lazyloader.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    import React, { useState, useEffect } from 'react';

    const ImageLoader = ({ src, alt, placeholder }) => {
    const [imageSrc, setImageSrc] = useState(placeholder || src);

    useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => setImageSrc(src);
    }, [src]);

    return <img src={imageSrc} alt={alt} />;
    };

    export default ImageLoader;