Simplify strategy for placeholders

Instead of waiting for dom ready and fetching the images via JS, just
insert them as is and let the browser handle the rest.

The placeholder is just shown behind the image, taking up the same
amount of space as the image for visual indication.

Gemfile

@@ -14,6 +14,4 @@ gemspec
 
 group :development, :test do
   gem 'byebug'
-  gem 'teaspoon-jasmine'
-  gem 'coffee-rails'
 end

Gemfile.lock

@@ -48,16 +48,8 @@ GEM
     bump (0.5.2)
     byebug (5.0.0)
       columnize (= 0.9.0)
-    coffee-rails (4.1.0)
-      coffee-script (>= 2.2.0)
-      railties (>= 4.0.0, < 5.0)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.9.1.1)
     columnize (0.9.0)
     erubis (2.7.0)
-    execjs (2.5.2)
     globalid (0.3.6)
       activesupport (>= 4.1.0)
     i18n (0.7.0)
@@ -106,10 +98,6 @@ GEM
       activesupport (>= 3.0)
       sprockets (>= 2.8, < 4.0)
     sqlite3 (1.3.10)
-    teaspoon (1.0.2)
-      railties (>= 3.2.5, < 5)
-    teaspoon-jasmine (2.2.0)
-      teaspoon (>= 1.0.0)
     thor (0.19.1)
     thread_safe (0.3.5)
     tzinfo (1.2.2)
@@ -121,10 +109,8 @@ PLATFORMS
 DEPENDENCIES
   bump (~> 0.5.2)
   byebug
-  coffee-rails
   lazy_images-rails!
   sqlite3
-  teaspoon-jasmine
 
 BUNDLED WITH
    1.10.6

README.md

@@ -12,21 +12,11 @@ This problem can be solved in many ways, but the solution provided by this plugi
 
 ### How?
 
-Instead of rendering a bare `<img />` tag, the Rails [`image_tag`](http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag) helper renders an SVG placeholder with the relevant data for the image instead. This placeholder takes up the same space as it's constituent image.
-
-Once the DOM is ready, the page is scanned for placeholders and each one is then replaced by it's image.
-
-In case of non-js browsers, a noscript fallback is provided with the placeholder.
+Instead of rendering a bare `<img />` tag, the Rails [`image_tag`](http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag) helper renders an SVG placeholder behind the image while it is loading. This placeholder takes up the same space as it's constituent image.
 
 ## Usage
 
-Include the supplied assets in the respective manifests, `application.js`:
-
-```javascript
-//= require lazy_images_rails
-```
-
-And `application.css`
+Include the supplied css asset in the manifest, `application.css`:
 
 ```css
 *= require lazy_images_rails
@@ -38,14 +28,6 @@ Add an image in a view, `index.html.erb`:
 <%= image_tag 'foo.png' %>
 ```
 
-And then trigger the lazy-load by initializing the client side of things on DOM loaded, e.g.:
-
-```javascript
-yourDomReadyFunction(function() {
-  LazyImagesRails.init();
-});
-```
-
 In case an image needs to be inserted without a placeholder, since the `image_tag` helper has been aliased, accessing the unmodified helper is done with the suffix:
 
 ```erb
@@ -73,7 +55,7 @@ So setting this attribute will affect the placeholder as well and set width and
 
 The default [placeholder image](https://github.com/rhardih/lazy-images-rails/blob/master/app/assets/images/placeholder.svg) is a simple graphic of a mountain and a moon. Both have been supplied with targetable classes for individual styling. Create a custom rule with these classes, e.g. (scss):
 
-```css
+```scss
 .rli-wrapper {
   .rli-placeholder {
     background: #fff;
@@ -107,20 +89,6 @@ Here assuming you have placed your custom placeholder in `app/assets/images/cust
 rake test
 ```
 
-### Clientside tests
-
-lazy-images-rails uses teaspoon for testing the clientside javascript:
-
-```bash
-cd test/dummy && rake teaspoon
-```
-
-Alternatively it can run directly in the browser, by starting the dummy app and visiting the test harness page [http://localhost:3000](http://localhost:3000):
-
-```bash
-cd test/dummy && bin/rails s
-```
-
 ## License
 
 [MIT-LICENSE](https://github.com/rhardih/lazy-images-rails/blob/master/MIT-LICENSE) | http://rhardih.mit-license.org

lazy_images-rails.gemspec

@@ -10,11 +10,10 @@ Gem::Specification.new do |s|
   s.authors     = ["René Hansen"]
   s.email       = ["[email protected]"]
   s.homepage    = "https://github.com/rhardih/lazy-images-rails"
-  s.summary     = "Lazy loaded images with placeholders and noscript fallback"
+  s.summary     = "Simple placeholders for images"
   s.description = "lazy-images-rails is a rails plugin that augments the " \
-    "standard image_tag helper to provide instant placeholder images while " \
-    "the actual image is being lazy loaded. A noscript fallback is provided " \
-    "along with the placeholder for non-js browsers."
+    "standard image_tag helper to provide instant placeholders while the" \
+    "actual image is still being fetched."
   s.license     = "MIT"
 
   s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE"]

lib/lazy_images/rails/placeholder.rb

@@ -0,0 +1,35 @@
+require 'nokogiri'
+
+module LazyImages
+  module Rails
+    class Placeholder
+      include ActionView::Helpers::AssetTagHelper
+
+      attr_reader :svg
+      attr_reader :options
+
+      def initialize(svg, options)
+        @svg = svg
+        @options = options
+      end
+
+      def to_s
+        if options[:size]
+          # N. B. extract_dimensions is a private method from
+          # actionview/lib/action_view/helpers/asset_tag_helper.rb
+          # beware of breakage
+          options[:width], options[:height] =
+            extract_dimensions(options.delete(:size))
+
+          fragment = Nokogiri::XML::DocumentFragment.parse(svg)
+          fragment.first_element_child['width'] = options[:width]
+          fragment.first_element_child['height'] = options[:height]
+
+          fragment.to_s
+        else
+          svg
+        end
+      end
+    end
+  end
+end

lib/lazy_images/rails/tag_helper.rb

@@ -1,4 +1,4 @@
-require 'nokogiri'
+require 'lazy_images/rails/placeholder'
 
 module LazyImages
   module Rails
@@ -10,29 +10,18 @@ def self.included(base)
       end
 
       def image_tag_with_lazy_images(source, options={})
-        src = path_to_image(source)
-        data = { rli_image_src: src, rli_placeholder: true }
-        placeholder = LazyImages::Rails.placeholder.dup
+        options.merge!(
+          class: "#{options[:class]} rli-image",
+          src: path_to_image(source)
+        )
 
-        if options[:size]
-          # N. B. extract_dimensions is a private method from
-          # actionview/lib/action_view/helpers/asset_tag_helper.rb
-          # beware of breakage
-          options[:width], options[:height] = extract_dimensions(options.delete(:size))
+        placeholder = LazyImages::Rails::Placeholder.new(
+          LazyImages::Rails.placeholder, options
+        )
 
-          fragment = Nokogiri::XML::DocumentFragment.parse(placeholder)
-          fragment.first_element_child.set_attribute('width', options[:width])
-          fragment.first_element_child.set_attribute('height', options[:height])
-
-          placeholder = fragment.to_s
-        end
-
-        content_tag(:div, data: data, class: 'rli-wrapper') do
-          placeholder.html_safe + content_tag(:noscript) do
-            options[:src] = src
-            options[:class] = "#{options[:class]} rli-image"
+        content_tag(:div, class: 'rli-wrapper') do
+          placeholder.to_s.html_safe +
             image_tag_without_lazy_images(source, options)
-          end
         end
       end
     end