Skip to content

Latest commit

 

History

History
44 lines (33 loc) · 1.49 KB

README.md

File metadata and controls

44 lines (33 loc) · 1.49 KB
Raw

react-precache-img npm npm license

React component that pre-caches images in the browser

Key features:

  • Preload a list of images in the browser for immediate use later in a user session
  • Does not render any actual HTML DOM elements, making it non-intrusive
  • Extremely lightweight at under 1kb

Install

npm install --save react-precache-img

Usage

import React from 'react';
import PreCacheImg from 'react-precache-img';

return (
    <PreCacheImg
      images={[
        'http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920.jpg',
        'https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg'
      ]}
    />
);

Testing:

In Chrome, clear your browser cache, then copy and paste this in a new tab to view your cache: chrome://cache/

After you load a page with the above example component, you should see http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920.jpg and https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg at the top of the list.

Props

images={[Array]} [required]

List of image URLs/URIs to be pre-cached