This time I will share jQuery Plugin and tutorial about Minimalist Responsive Image jQuery Plugin – responsive-image.js, hope it will help you in programming stack.
Just another jQuery based responsive image solution that loads the appropriate images for your cross-platform website to reduce network traffic and increase page load speed.
How to use it:
1. Add the jQuery responsive-image.js’ script to the page, after you’ve added jQuery.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="jquery.responsive-image.js"></script> |
2. Insert an image into your web page and specify the image sources for different screen resolutions using HTML5 data attributes.
2 |
data-mobile="mobile.png" |
3 |
data-phablet="phablet.png" |
4 |
data-tablet="tablet.png" |
5 |
data-desktop="desktop.png" |
3. Call the plugin on document ready and done.
1 |
$("body").responsiveImage(); |
4. Change the default breakpoints.
1 |
$("body").responsiveImage({ |
This awesome jQuery plugin is developed by rakuishi. For more Advanced Usages, please check the demo page or visit the official website.
