lazy_loading_page
Load page lazily as and when required
lazy_loading_page is a gem that helps to load page lazily that is as and when required. The gem reduces page load time and reduces server ram by loading important content of the page in the first call and then by triggering calls to load the remaining page. The gem give Reactjs like functionality in your ruby-on-rails application.
Installation
Add this line to your application's Gemfile:
gem 'lazy_loading_page'And then execute:
$ bundle
Or install it yourself as:
$ gem install lazy_loading_page
Add the following line to your application.js file:
//= require lazy_load
Add the following line to your application.css file:
*= require lazy_load
Usage
Call the following method from view file (.html.erb / .html.haml) and pass a url as a parameter
.html.erb example
Passing url as string
<%= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications") %>Passing url string with parameters
<%= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5") %>Passing url as helper method
<%= lazy_load(notifications_path) %>Passing url as helper method with parameters
<%= lazy_load(notifications_path(page: 1, count: 5)) %>Configuring lazy loading page
Configuration can be achieved by passing parameters to lazy_load method Following are some configuration examples:
<%= lazy_load(notifications_path(page: 1, count: 5), id: "my_lazy_loader", type: "script", success: "afterSuccess()") %>
<%= lazy_load(notifications_path, class: "lazy_loaders", loader: "off", type: "json", failure: "afterFailure()", complete: "afterComplete(my_arg1, my_arg2)") %>
<%= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5", later: true, id: "later_lazy_loader", failure: "onSuccess(my_arg1)", complete: "onComplete()") %>Note
When using configuration option later: true explicit trigger the request call.
By calling the function delayedLoading(elementToLoad); in your javascript and passing the lazy_loading element/elements as argument.
lazy_loading element/elements has class lazy_load
Checkout the Demo
lazy-loading-page app implementation @Github
.html.haml example:
= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications")
= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5")
= lazy_load(notifications_path)
= lazy_load(notifications_path(page: 1, count:5))
= lazy_load(notifications_path(page: 1, count: 5), id: "my_lazy_loader", type: "script", success: "afterSuccess()")
= lazy_load(notifications_path, class: "lazy_loaders", loader: "off", type: "json", failure: "afterFailure()", complete: "afterComplete(my_arg1, my_arg2)")
= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5", later: true, id: "later_lazy_loader", failure: "onSuccess(my_arg1)", complete: "onComplete()")Configurations:
| Attributes | Defaults | Options | Description |
|---|---|---|---|
| type | null | script/json | Type of request to be made. |
| later | null | true | This will stop the implicit loading of the request, so that user can explicit load the request when required. |
| id | null | userdefined |
Can attach ID to the object loaded in the DOM, it can be helpful in explicit loading of the request. |
| loader | on | off | This can be used to turn on / off the loading effect. |
| class | null | userdefined |
Can attach class to the object loaded in the DOM, it can be helpful in explicit loading of the request. |
Callbacks:
| Callback | Example | Description |
|---|---|---|
| success | functionAfterSuccess(arg1, arg2); | This function will be called when the request is successful. |
| failure | functionAfterFailure(arg1, arg2); | This function will be called when the request fails. |
| complete | functionAfterComplete(arg1, arg2); | This function will be called when the request is completed. |
Development
After checking out the repo, run bin/setup to install dependencies. Then, run bin/console for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release to create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.
Contributing
- Fork it ( https://github.com/[my-github-username]/lazy_loading_page/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
License
The gem is available as open source under the terms of the MIT License.