DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Riloadr - A Cross-Browser Framework-Independent Responsive Images Loader

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

Hirvesh Munogee user avatar by
Hirvesh Munogee
·
Apr. 19, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
6.21K Views

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
Loader (equipment)

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • This Is How You Give Good Feedback at Work
  • Types of UI Design Patterns Depending on Your Idea
  • 6 Best Books to Learn Multithreading and Concurrency in Java
  • Top 20 Git Commands With Examples

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo