Submit A Resource
Contact Us
About Functionn

Subscription Options

Subscribe By Email (265+)



Mar 27, 2012

Author: Hirvesh Posted At: 3/27/2012 Tags: ,

Foresight.js – A JavaScript Library For Handling Responsive Images Smartly

Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage. It modifies context image requests, specifically img src attribute, but the server does the image resizing. Media queries however should be used when dealing with CSS background-images, while foresight.js is used to handle inline img elements (or until current web standards are improved).  The features of Foresight.js are:
  • Request hi-res images according to device pixel ratio
  • Detect network connection speed
  • Does not make multiple requests for the same image
  • Javascript library and framework independent (ie: jQuery not required)
  • Cross-browser and cross-platform
  • Image dimensions set by percents will scale to the parent element's available width and device pixel ratio
  • Fully customizable through global configuration options and individual img attributes
  • Default images will load without javascript enabled
  • Minifies down to roughly 5K

Requirements: None
License: Free

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Trending Posts On Functionn This Week


Other Interesting Resources:


Post a Comment


Recent Posts

Popular Categories

Popular Components

Popular Licenses