README
Smart Images
Summary
Window width based image loading for responsive applications.
Visit https://aklump.github.io/jquery.smart_images for full demo.
Quick Start
- Install with
yarn add @aklump/smart-images
ornpm i @aklump/smart-images
- Please open
demo/index.html
to see this plugin in action. The demo is only available if you download this from GitHub; it is not included in the npm package.
Requirements
- jQuery >= 1.4
Contributing
If you find this project useful... please consider making a donation.
Usage
Here is an example, the simplest use case, a single breakpoint between mobile and desktop at 768px. Your usage will vary depending upon the number of breakpoints you choose.
Create a mobile image at 767px wide. Note: 1 px less than your breakpoint.
Create a desktop image larger than 767px and wide enough for desktop, e.g. 1075px.
Define the HTML markup:
<div class="smart-image"> <span data-si-srcset="mobile.jpg" data-si-media="max-width:767px"></span> <span data-si-srcset="desktop.jpg" data-si-media="min-width:768px"></span> <img/> </div>
Add the Javascript.
$('document').ready(function () { $('.smart-image').smartImages(); });
Set your browser width to less than 768 pixels and load your page.
Notice the mobile image has been set in the img tag's
src
attribute.Resize to greater than 768 pixels and notice the img tag
src
changes to desktop.jpg.