Auto Swap Images On Mobile Device - jQuery responsiveImage.js

File Size: 230 KB
Views Total: 1901
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Swap Images On Mobile Device - jQuery responsiveImage.js

Yet another jQuery responsive image plugin for cross-platform web apps that automatically swap the image sources depending on the screen sizes.

How to use it:

1. Load the jQuery library (slim build) and the jQuery responsiveImage.js script in your html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="responsiveimage.js"></script>

2. Prepare your images for different screen sizes.

// regular image
sample.jpg

// for mobile
sample_mobile.jpg

3. Insert the desktop version of your image into the webpage.

<img src="sample.jpg" class="for-mob">

4. Initialize the plugin and done. The plugin will automatically replace the 'sample.jpg' with the 'sample_mobile.jpg' on mobile devices which the screen size is less than 768px.

var RI = new ResponsiveImage();
RI.run();

// re-init on window resize
(window).resize(function() {
  RI.run();
});

5. Customize the CSS selector of responsive images.

var RI = new ResponsiveImage({
    classSelector: '.for-mob'
});

6. Customize the suffix name of mobile images.

var RI = new ResponsiveImage({
    toAppend: '_mobile'
});

7. Customize the breakpoint where the image will be swapped.

var RI = new ResponsiveImage({
    minScreenSize: 768
});

8. To fix jQuery conflict issues, follow this step.

var RI = new ResponsiveImage({
    jQuery: $
});

Changelog:

2018-09-29

  • fix the short lag in between
  • fix the issue of broken image when it loads

This awesome jQuery plugin is developed by edwinyin. For more Advanced Usages, please check the demo page or visit the official website.