Skip to content

Layzr JS Wrapper for Rails image_tag helpers for lazy loading of images

License

Notifications You must be signed in to change notification settings

imsinu9/layzr-rails

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Layzr-Rails

This project integrates the pure vanilla JS Layzr Plugin for Rails image_tag helpers

What's Layzr Plugin?

From the project page:

A small, fast, and modern library for lazy loading images, its written in vanilla JS so don't need any Jquery or other js library.

See live demo

Documentation

Installation

Add it in your gemfile

gem 'layzr-rails'

Create a configuration file and put it in your initializers config/initializers/layzr.rb

Layzr::Rails.configure do |config|
  config.placeholder = "/assets/some-default-image.png"
end

Add Layzr js and require layzr library in application.js ie:

//= require layzr

And place the jvascript code:

$(document).ready(function() {
   const instance = Layzr()
});

Features

  • Add lazy: true option to Rails image_tag helpers to render layzr-friendly img tags.
  • Simple (really). That's pretty much it.

Example

<%= image_tag "kittenz.png", alt: "OMG a cat!", lazy: true %>

Equals:

<img alt="OMG a cat!" data-normal="/images/kittenz.png" src="/assets/some-default-image.png">

More options

<%= image_tag "normal.jpg", lazy: true, layzr: { retina: "retina.jpg", srcset: "small.jpg 320w, medium.jpg 768w, large.jpg 1024w"} %>

Equals:

<img src="/assets/some-default-image.png" data-normal="normal.jpg" data-retina="retina.jpg" data-srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1024w">  

License

Layzr-Rails is released under the MIT License.

About

Layzr JS Wrapper for Rails image_tag helpers for lazy loading of images

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Ruby 100.0%