Swap Images Based On Screen Size – Replacer

Preview:

Description:

Replacer is a JavaScript library that automatically swaps the path of an image based on the screen size.

How to use it:

1. Load the Replacer.js library.

<script src="./dist/replacer.umd.js"></script>

2. Initialize the Replacer.

replacer.init();

3. Specify the corresponding image file suffix for different screen sizes.

<img data-replace='[{"type": "small", "suffix": "_sp"},{"type": "middle", "suffix": "_tab"}]' src="./demo.jpg" />

4. Override the default breakpoints.

replacer.init([
  {
    type: 'large',
    deviceType: 'pc',
    query: '(min-width: 1201px)'
  },
  {
    type: 'middle',
    deviceType: 'tab',
    query: '(max-width: 1200px) and (min-width: 769px)'
  },
  {
    type: 'small',
    deviceType: 'sp',
    query: '(max-width: 768px)'
  }]
);

5. More API methods.

// add change event
replacer.addEvent()
// remove change event
replacer.resetEvent()
// get the current state
replacer.getState()
// get the current device type
replacer.getType()
// verify MediaQueryList matches.
replacer.isMatch( type, deviceType, query)
// check screen size
replacer.isType('small', 'middle', 'large')
// check device type
replacer.isDeviceType('sp', 'tab', 'pc')
// verify MediaQueryList matches.
replacer.isQuery(mediaQuery)