No commit activity in last 3 years
No release in over 3 years
LazyLoadingPage loads heavy pages lazily that is as and when required. Single heavy request is broken in small requests, so no timeouts and no congestion of requests. 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.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

 Project Readme

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

  1. Fork it ( https://github.com/[my-github-username]/lazy_loading_page/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

License

The gem is available as open source under the terms of the MIT License.