This project integrates the jQuery Lazy Load Plugin
What's jQuery Lazy Load?
From the project page:
Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
See example (scroll down to see images load)
lazy: trueoption to Rails
image_taghelpers to render lazyload-friendly img tags.
- Simple (really). That's pretty much it.
<%= image_tag "kittenz.png", alt: "OMG a cat!", lazy: true %>
<img alt="OMG a cat!" data-original="/images/kittenz.png" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif">
Add this line to your application's Gemfile:
Download the jQuery Lazy Load Plugin
Lazy Load can be customized, see more options
Important: Remember that the Lazy Load Plugin depends on jQuery.
By default, a 1x1 grey gif is used as placeholder (from http://appelsiini.net/projects/lazyload/img/grey.gif). This can be easily customized:
# config/initializers/lazyload.rb Lazyload::Rails.configure do |config| config.placeholder = "/public/img/grey.gif" end
Lazyload-Rails is released under the MIT License.