0.01
No commit activity in last 3 years
No release in over 3 years
Lazy loaded images for rails
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

> 4.1.0
 Project Readme

Unveil.js for Rails

Lazy loaded images on rails. If you want a quick start using unveil.js with rails there is now a gem for that.

By loading your images as they appear in the viewport rather than on load you can improve your rails application's page speed.

Installation

Add the unveil-rails gem into your Gemfile:

gem 'unveil-rails', '~> 0.2.1'

Install unveil.js and initializer into your rails app:

bin/rails g unveil:rails:install

Include the unveil.js initializer in app/assets/javascripts/application.js:

//= require unveil_init

Now use the helper method where ever you want lazy images:

<%= lazy_image_tag('an-image.png') %>
<%= lazy_image_tag('an-image.png', retina: 'a-retina-image.png') %>
<%= lazy_image_tag('an-image.png', placeholder: 'placeholder.png') %>

Configuration

The installation generator will have added an initializer to your application. In this file there are a couple of settings you can change.

Threshold

Unveil::Rails.config.threshold = 200

Setting this variable to an integer will set the unveil threshold setting as documented here.

Default placeholder

You may set an alternative default placeholder image:

Unveil::Rails.config.default_placeholder = 'default.jpg'

You can set the placeholder per lazy image by passing in the placeholder option:

<%= lazy_image_tag('an-image.png', placeholder: 'placeholder.png') %>

Credits

made

Developed and maintained by Made Tech. Key contributions:

And of course Luís Almeida creator of unveil.js.

License

Copyright © 2014 Made Tech Ltd. It is free software, and may be redistributed under the terms specified in the LICENSE file.