feat: Add support for lazy image loading

README.md

@@ -102,6 +102,7 @@ The `ix_image_tag` helper method makes it easy to pass parameters to imgix to ha
 
 * `source`: An optional String indicating the source to be used. If unspecified `:source` or `:default_source` will be used. If specified, the value must be defined in the config.
 * `path`: The path or URL of the image to display.
+  `lazy`: If true, attributes will be generated in the `data` attribute hash. A 1-pixel GIF will be displayed until image has been loaded. You can optionally pass an URL to `lazy` for the image which will be used i.e. your own loading GIF.
 * `tag_options`: HTML attributes to apply to the generated `img` element. This is useful for adding class names, alt tags, etc.
 * `url_params`: The imgix URL parameters to apply to this image. These will be applied to each URL in the `srcset` attribute, as well as the fallback `src` attribute.
 * `srcset_options`: A variety of options that allow for fine tuning `srcset` generation. More information on each of these modifiers can be found in the [imgix-rb documentation](https://github.com/imgix/imgix-rb#srcset-generation). Any of the following can be passed as arguments:

lib/imgix/rails/image_tag.rb

@@ -3,9 +3,28 @@
 class Imgix::Rails::ImageTag < Imgix::Rails::Tag
 
   def render
-    @tag_options[:srcset] = srcset
-    @tag_options[:sizes] ||= '100vw'
+    url = ix_image_url(@source, @path, @url_params)
 
-    image_tag(ix_image_url(@source, @path, @url_params), @tag_options)
+    if @lazy
+      @tag_options[:data] ||= {}
+      @tag_options[:data][:srcset] = srcset
+      @tag_options[:data][:sizes] ||= '100vw'
+      @tag_options[:data][:src] = url
+      image_tag(lazy_url, @tag_options)
+    else
+      @tag_options[:sizes] ||= '100vw'
+      @tag_options[:srcset] = srcset
+      image_tag(url, @tag_options)
+    end
+  end
+
+  private
+
+  def lazy_url
+    if @lazy == true
+      "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
+    else
+      @lazy
+    end
   end
 end

lib/imgix/rails/tag.rb

@@ -5,12 +5,13 @@ class Imgix::Rails::Tag
   include Imgix::Rails::UrlHelper
   include ActionView::Helpers
 
-  def initialize(path, source: nil, tag_options: {}, url_params: {}, srcset_options: {})
+  def initialize(path, source: nil, tag_options: {}, url_params: {}, srcset_options: {}, lazy: nil)
     @path = path
     @source = source
     @tag_options = tag_options
     @url_params = url_params
     @srcset_options = srcset_options
+    @lazy = lazy
   end
 
 protected

lib/imgix/rails/view_helper.rb

@@ -8,8 +8,8 @@ module Rails
     module ViewHelper
       include UrlHelper
 
-      def ix_image_tag(source=nil, path, tag_options: {}, url_params: {}, srcset_options: {})
-        return Imgix::Rails::ImageTag.new(path, source: source, tag_options: tag_options, url_params: url_params, srcset_options: srcset_options).render
+      def ix_image_tag(source=nil, path, tag_options: {}, url_params: {}, srcset_options: {}, lazy: nil)
+        return Imgix::Rails::ImageTag.new(path, source: source, tag_options: tag_options, url_params: url_params, srcset_options: srcset_options, lazy: lazy).render
       end
 
       def ix_picture_tag(source=nil, path, tag_options: {}, url_params: {}, breakpoints: {}, srcset_options: {})

spec/imgix/rails_spec.rb

@@ -333,6 +333,27 @@
           end
         end
       end
+      describe 'lazy' do
+        it 'sets the original path to data-src' do
+          tag = Nokogiri::HTML.fragment(helper.ix_image_tag("image.jpg", lazy: true)).children[0]
+          expect(tag.attribute('data-src').value).to eq "https://assets.imgix.net/image.jpg?ixlib=rails-#{Imgix::Rails::VERSION}"
+        end
+
+        it 'sets src to gif if no image is provided' do
+          tag = Nokogiri::HTML.fragment(helper.ix_image_tag("image.jpg", lazy: true)).children[0]
+          expect(tag.attribute('src').value).to include "data:image/gif"
+        end
+
+        it 'sets src to image provided with lazy' do
+          tag = Nokogiri::HTML.fragment(helper.ix_image_tag("image.jpg", lazy: "lazy-image.jpg")).children[0]
+          expect(tag.attribute('src').value).to eq "/images/lazy-image.jpg"
+        end
+
+        it 'keeps the sourcesets on data-sourcesets' do
+          tag = Nokogiri::HTML.fragment(helper.ix_image_tag("image.jpg", lazy: true)).children[0]
+          expect(tag.attribute('data-srcset').value.split(',').size).to eq(31)
+        end
+      end
     end
 
     describe '#ix_picture_tag' do