Riloadr - A Cross-Browser Framework-Independent Responsive Images Loader
Join the DZone community and get the full member experience.
Join For Free
riloadr
is a cross-browser framework-independent responsive images loader. the
goal of this library is to deliver optimized, contextual image sizes in
responsive layouts that utilize dramatically different image sizes at
different resolutions.
ideally, this could enable developers to start with mobile-optimized
images in their html and specify a larger size to be used for users with
larger screen resolutions -- without requesting both image sizes, and
without ua sniffing.
it's features are:
- no dependencies: just riloadr, html and css (no server involved if you don't want to, no cookies, no .htaccess, no other javascript library or framework required).
- ease of use: 15-30 mins reading the docs and checking some demos and you're good to go!
- absolute control: riloadr will process only the images you tell it to.
- one request per image: riloadr does not make multiple requests for the same image.
- optimal image size delivery: riloadr mimics css, it computes the viewport's width in css pixels and the optimal image size for the viewport according to the breakpoints you set through the breakpoints option (sort of css media queries).
- lazy load of images: riloadr gives you the option to defer the load of all images in a group (faster pageload).
- image groups: you can create different riloadr objects and configure each one to your needs (ie: one for images in the sidebar and another one for images in the main column).
- image callbacks: riloadr allows you to attach callbacks for the onload and onerror image events.
- image retries: you can configure any riloadr object to retry n times the loading of an image if it failed to load.
- support for browsers with no javascript support or javascript disabled: use the noscript tag.
- no ua sniffing: riloadr does not use device detection through user-agents.
- lightweight: 4kb minified (3.45kb jquery version minified)
- amd compatible
- jquery version available

requirements : none
demo : http://www.margenn.com/tubal/riloadr/demos/
license : mit license
Published at DZone with permission of Hirvesh Munogee, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments