react-eye-functions

⚡ Preload Image element show in ViewPort

Preload images when given element show in viewport.

Installation

Install with npm install react-eye-functions or yarn add react-eye-functions

Usage

Import in your components with import {preloadElementInViewPort} from 'react-eye-functions'

	const imageArray = [
		'your image URL 1',
		'your image URL 2'
	];
	preloadElementInViewPort(element, imageArray); 

    <div className="preload-images" data-srcset = "
        your image URL 1,
        your image URL 2">
    </div>

Examples 1

    const element = document.querySelector('.your-element');
	const imageArray = [
		'http://www.image_url_1.png',
		'http://www.image_url_2.png'
	];
	preloadElementInViewPort(element, imageArray); 

Examples 2

    <div className="preload-images" data-srcset = "http://www.image_url_1.png,http://www.image_url_2.png">

    </div>