Swap Images Based On Screen Size – Replacer

Category: Image , Javascript | February 3, 2022
Author:webcyou-org
Views Total:220 views
Official Page:Go to website
Last Update:February 3, 2022
License:MIT

Preview:

Swap Images Based On Screen Size – Replacer

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)

You Might Be Interested In:


One thought on “Swap Images Based On Screen Size – Replacer

  1. jan

    What is the point of this library. It is better not to use the properties built into the browser.
    picure and source?

    For this, by using ‘loading=”lazy”‘ we can be sure that the photos will not be loaded until they appear in the page view.

    Reply

Leave a Reply