Over a million developers have joined DZone.

Riloadr - A Cross-Browser Framework-Independent Responsive Images Loader

DZone's Guide to

Riloadr - A Cross-Browser Framework-Independent Responsive Images Loader

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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

: None
License: MIT License

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Hirvesh Munogee, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}