https://github.com/JasonBoy/prefetch-image

Prefetch all images for your web app, especially for mobile/h5 promotion pages
https://github.com/JasonBoy/prefetch-image

prefetch prefetch-image preload-images preloader

Last synced: 12 months ago
JSON representation

Prefetch all images for your web app, especially for mobile/h5 promotion pages

• Host: GitHub
• URL: https://github.com/JasonBoy/prefetch-image
• Owner: JasonBoy
• License: mit
• Created: 2017-05-08T10:40:10.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T06:50:53.000Z (about 3 years ago)
• Last Synced: 2025-03-21T05:33:25.468Z (12 months ago)
• Topics: prefetch, prefetch-image, preload-images, preloader
• Language: JavaScript
• Size: 182 KB
• Stars: 23
• Watchers: 1
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# prefetch-image [![npm](https://img.shields.io/npm/v/prefetch-image.svg)](https://www.npmjs.com/package/prefetch-image)

Prefetch all images for your web app, especially for mobile/h5 promotion pages.

## Usage

`npm install prefetch-image --save` or

`yarn add prefetch-image`

```javascript

const prefetchImages = require('prefetch-image');

//or

//import prefetchImages from 'prefetch-image';

const images = [

  '/1.png',

  '/2.jpg',

  '/3.png',

];

prefetchImages(images, options)

  .then((result) => {

    //result is an array containing all the "Image" objects

    console.log('all images loaded!');

    //start init your page logic...

  });

// or with multiple domain object

const imagesOnMultipleDomains = {

  'http://domain1.com': ['/image1.png', '/image2.png'],

  'http://domain2.com': ['/image3.png', '/image4.png'],

};

prefetchImages(imagesOnMultipleDomains, options)

  .then((results) => {

    //result is an array containing all the "Image" objects grouped by domains, e.g

    //results = [${domain1ImagesArray}, ${domain2ImagesArray}]

    console.log('all images loaded!');

    //start init your page logic...

  });

```

> Don't forget to add `Cache-Control` for your assets

### Options

- concurrency: number of images be loading concurrently on each domain, default: 6

- debug: boolean, default false

## LICENSE

MIT