lazyload-image-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +22 -0
- data/README.md +50 -0
- data/lib/lazyload/image/rails.rb +10 -0
- data/lib/lazyload/image/rails/version.rb +7 -0
- data/vendor/assets/javascript/jquery.lazyload.js +242 -0
- metadata +77 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 4a17ba95410b0724ac599da9ac7deea52cf4617f
|
4
|
+
data.tar.gz: cc209fbb656e8a11aee26f2283318c37d6dad8e2
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: b6b03989aa628f18f33e9b8394bfea75b11f6feeee72ab97accc57d42980a0032a356f6f87d747eb61743d0a3e75f4ce2c6523a4bb0d7c6602f0ecd93aca2db3
|
7
|
+
data.tar.gz: 3fac255b6a320af39199858aa283c3b826b7a0770a73185ffcf7516eb951a682f0f42df1675c8a0140f894858dcaa12745fa5b3cdba662bb397ac8c48c9b2dc7
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2014 Abhishek Sunkuru
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
22
|
+
|
data/README.md
ADDED
@@ -0,0 +1,50 @@
|
|
1
|
+
## Lazyloading Image in Rails
|
2
|
+
|
3
|
+
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
|
4
|
+
|
5
|
+
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem 'lazyload-image-rails'
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install lazyload-image-rails
|
22
|
+
|
23
|
+
## Usage
|
24
|
+
Lazy Load depends on jQuery
|
25
|
+
|
26
|
+
in application.js add following
|
27
|
+
|
28
|
+
= require jquery.lazyload
|
29
|
+
|
30
|
+
You must alter your image tags. Address of the image must be put into data-original attribute. Give lazy loaded images a specific class. This way you can easily control which images plugin is binded to.
|
31
|
+
```html
|
32
|
+
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
|
33
|
+
```
|
34
|
+
```javascript
|
35
|
+
$(function() {
|
36
|
+
$("img.lazy").lazyload();
|
37
|
+
});
|
38
|
+
```
|
39
|
+
####For more information please refer:
|
40
|
+
|
41
|
+
1. http://www.appelsiini.net/projects/lazyload
|
42
|
+
2. https://github.com/tuupola/jquery_lazyload
|
43
|
+
|
44
|
+
## Contributing
|
45
|
+
|
46
|
+
1. Fork it ( https://github.com/abhisheksunkuru/lazyload-image-rails/fork )
|
47
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
48
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
49
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
50
|
+
5. Create a new Pull Request
|
@@ -0,0 +1,242 @@
|
|
1
|
+
/*
|
2
|
+
* Lazy Load - jQuery plugin for lazy loading images
|
3
|
+
*
|
4
|
+
* Copyright (c) 2007-2013 Mika Tuupola
|
5
|
+
*
|
6
|
+
* Licensed under the MIT license:
|
7
|
+
* http://www.opensource.org/licenses/mit-license.php
|
8
|
+
*
|
9
|
+
* Project home:
|
10
|
+
* http://www.appelsiini.net/projects/lazyload
|
11
|
+
*
|
12
|
+
* Version: 1.9.3
|
13
|
+
*
|
14
|
+
*/
|
15
|
+
|
16
|
+
(function($, window, document, undefined) {
|
17
|
+
var $window = $(window);
|
18
|
+
|
19
|
+
$.fn.lazyload = function(options) {
|
20
|
+
var elements = this;
|
21
|
+
var $container;
|
22
|
+
var settings = {
|
23
|
+
threshold : 0,
|
24
|
+
failure_limit : 0,
|
25
|
+
event : "scroll",
|
26
|
+
effect : "show",
|
27
|
+
container : window,
|
28
|
+
data_attribute : "original",
|
29
|
+
skip_invisible : true,
|
30
|
+
appear : null,
|
31
|
+
load : null,
|
32
|
+
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
|
33
|
+
};
|
34
|
+
|
35
|
+
function update() {
|
36
|
+
var counter = 0;
|
37
|
+
|
38
|
+
elements.each(function() {
|
39
|
+
var $this = $(this);
|
40
|
+
if (settings.skip_invisible && !$this.is(":visible")) {
|
41
|
+
return;
|
42
|
+
}
|
43
|
+
if ($.abovethetop(this, settings) ||
|
44
|
+
$.leftofbegin(this, settings)) {
|
45
|
+
/* Nothing. */
|
46
|
+
} else if (!$.belowthefold(this, settings) &&
|
47
|
+
!$.rightoffold(this, settings)) {
|
48
|
+
$this.trigger("appear");
|
49
|
+
/* if we found an image we'll load, reset the counter */
|
50
|
+
counter = 0;
|
51
|
+
} else {
|
52
|
+
if (++counter > settings.failure_limit) {
|
53
|
+
return false;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
});
|
57
|
+
|
58
|
+
}
|
59
|
+
|
60
|
+
if(options) {
|
61
|
+
/* Maintain BC for a couple of versions. */
|
62
|
+
if (undefined !== options.failurelimit) {
|
63
|
+
options.failure_limit = options.failurelimit;
|
64
|
+
delete options.failurelimit;
|
65
|
+
}
|
66
|
+
if (undefined !== options.effectspeed) {
|
67
|
+
options.effect_speed = options.effectspeed;
|
68
|
+
delete options.effectspeed;
|
69
|
+
}
|
70
|
+
|
71
|
+
$.extend(settings, options);
|
72
|
+
}
|
73
|
+
|
74
|
+
/* Cache container as jQuery as object. */
|
75
|
+
$container = (settings.container === undefined ||
|
76
|
+
settings.container === window) ? $window : $(settings.container);
|
77
|
+
|
78
|
+
/* Fire one scroll event per scroll. Not one scroll event per image. */
|
79
|
+
if (0 === settings.event.indexOf("scroll")) {
|
80
|
+
$container.bind(settings.event, function() {
|
81
|
+
return update();
|
82
|
+
});
|
83
|
+
}
|
84
|
+
|
85
|
+
this.each(function() {
|
86
|
+
var self = this;
|
87
|
+
var $self = $(self);
|
88
|
+
|
89
|
+
self.loaded = false;
|
90
|
+
|
91
|
+
/* If no src attribute given use data:uri. */
|
92
|
+
if ($self.attr("src") === undefined || $self.attr("src") === false) {
|
93
|
+
if ($self.is("img")) {
|
94
|
+
$self.attr("src", settings.placeholder);
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
/* When appear is triggered load original image. */
|
99
|
+
$self.one("appear", function() {
|
100
|
+
if (!this.loaded) {
|
101
|
+
if (settings.appear) {
|
102
|
+
var elements_left = elements.length;
|
103
|
+
settings.appear.call(self, elements_left, settings);
|
104
|
+
}
|
105
|
+
$("<img />")
|
106
|
+
.bind("load", function() {
|
107
|
+
|
108
|
+
var original = $self.attr("data-" + settings.data_attribute);
|
109
|
+
$self.hide();
|
110
|
+
if ($self.is("img")) {
|
111
|
+
$self.attr("src", original);
|
112
|
+
} else {
|
113
|
+
$self.css("background-image", "url('" + original + "')");
|
114
|
+
}
|
115
|
+
$self[settings.effect](settings.effect_speed);
|
116
|
+
|
117
|
+
self.loaded = true;
|
118
|
+
|
119
|
+
/* Remove image from array so it is not looped next time. */
|
120
|
+
var temp = $.grep(elements, function(element) {
|
121
|
+
return !element.loaded;
|
122
|
+
});
|
123
|
+
elements = $(temp);
|
124
|
+
|
125
|
+
if (settings.load) {
|
126
|
+
var elements_left = elements.length;
|
127
|
+
settings.load.call(self, elements_left, settings);
|
128
|
+
}
|
129
|
+
})
|
130
|
+
.attr("src", $self.attr("data-" + settings.data_attribute));
|
131
|
+
}
|
132
|
+
});
|
133
|
+
|
134
|
+
/* When wanted event is triggered load original image */
|
135
|
+
/* by triggering appear. */
|
136
|
+
if (0 !== settings.event.indexOf("scroll")) {
|
137
|
+
$self.bind(settings.event, function() {
|
138
|
+
if (!self.loaded) {
|
139
|
+
$self.trigger("appear");
|
140
|
+
}
|
141
|
+
});
|
142
|
+
}
|
143
|
+
});
|
144
|
+
|
145
|
+
/* Check if something appears when window is resized. */
|
146
|
+
$window.bind("resize", function() {
|
147
|
+
update();
|
148
|
+
});
|
149
|
+
|
150
|
+
/* With IOS5 force loading images when navigating with back button. */
|
151
|
+
/* Non optimal workaround. */
|
152
|
+
if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
|
153
|
+
$window.bind("pageshow", function(event) {
|
154
|
+
if (event.originalEvent && event.originalEvent.persisted) {
|
155
|
+
elements.each(function() {
|
156
|
+
$(this).trigger("appear");
|
157
|
+
});
|
158
|
+
}
|
159
|
+
});
|
160
|
+
}
|
161
|
+
|
162
|
+
/* Force initial check if images should appear. */
|
163
|
+
$(document).ready(function() {
|
164
|
+
update();
|
165
|
+
});
|
166
|
+
|
167
|
+
return this;
|
168
|
+
};
|
169
|
+
|
170
|
+
/* Convenience methods in jQuery namespace. */
|
171
|
+
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
|
172
|
+
|
173
|
+
$.belowthefold = function(element, settings) {
|
174
|
+
var fold;
|
175
|
+
|
176
|
+
if (settings.container === undefined || settings.container === window) {
|
177
|
+
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
|
178
|
+
} else {
|
179
|
+
fold = $(settings.container).offset().top + $(settings.container).height();
|
180
|
+
}
|
181
|
+
|
182
|
+
return fold <= $(element).offset().top - settings.threshold;
|
183
|
+
};
|
184
|
+
|
185
|
+
$.rightoffold = function(element, settings) {
|
186
|
+
var fold;
|
187
|
+
|
188
|
+
if (settings.container === undefined || settings.container === window) {
|
189
|
+
fold = $window.width() + $window.scrollLeft();
|
190
|
+
} else {
|
191
|
+
fold = $(settings.container).offset().left + $(settings.container).width();
|
192
|
+
}
|
193
|
+
|
194
|
+
return fold <= $(element).offset().left - settings.threshold;
|
195
|
+
};
|
196
|
+
|
197
|
+
$.abovethetop = function(element, settings) {
|
198
|
+
var fold;
|
199
|
+
|
200
|
+
if (settings.container === undefined || settings.container === window) {
|
201
|
+
fold = $window.scrollTop();
|
202
|
+
} else {
|
203
|
+
fold = $(settings.container).offset().top;
|
204
|
+
}
|
205
|
+
|
206
|
+
return fold >= $(element).offset().top + settings.threshold + $(element).height();
|
207
|
+
};
|
208
|
+
|
209
|
+
$.leftofbegin = function(element, settings) {
|
210
|
+
var fold;
|
211
|
+
|
212
|
+
if (settings.container === undefined || settings.container === window) {
|
213
|
+
fold = $window.scrollLeft();
|
214
|
+
} else {
|
215
|
+
fold = $(settings.container).offset().left;
|
216
|
+
}
|
217
|
+
|
218
|
+
return fold >= $(element).offset().left + settings.threshold + $(element).width();
|
219
|
+
};
|
220
|
+
|
221
|
+
$.inviewport = function(element, settings) {
|
222
|
+
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
|
223
|
+
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
|
224
|
+
};
|
225
|
+
|
226
|
+
/* Custom selectors for your convenience. */
|
227
|
+
/* Use as $("img:below-the-fold").something() or */
|
228
|
+
/* $("img").filter(":below-the-fold").something() which is faster */
|
229
|
+
|
230
|
+
$.extend($.expr[":"], {
|
231
|
+
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
|
232
|
+
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
|
233
|
+
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
|
234
|
+
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
|
235
|
+
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
|
236
|
+
/* Maintain BC for couple of versions. */
|
237
|
+
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
|
238
|
+
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
|
239
|
+
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
|
240
|
+
});
|
241
|
+
|
242
|
+
})(jQuery, window, document);
|
metadata
ADDED
@@ -0,0 +1,77 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: lazyload-image-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- abhishek
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-12-06 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.7'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.7'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '10.0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '10.0'
|
41
|
+
description: lazy loading image will be helpful to improve performance
|
42
|
+
email:
|
43
|
+
- abhisheksunkuru@gmail.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- MIT-LICENSE
|
49
|
+
- README.md
|
50
|
+
- lib/lazyload/image/rails.rb
|
51
|
+
- lib/lazyload/image/rails/version.rb
|
52
|
+
- vendor/assets/javascript/jquery.lazyload.js
|
53
|
+
homepage: ''
|
54
|
+
licenses:
|
55
|
+
- MIT
|
56
|
+
metadata: {}
|
57
|
+
post_install_message:
|
58
|
+
rdoc_options: []
|
59
|
+
require_paths:
|
60
|
+
- lib
|
61
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
62
|
+
requirements:
|
63
|
+
- - ">="
|
64
|
+
- !ruby/object:Gem::Version
|
65
|
+
version: '0'
|
66
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
67
|
+
requirements:
|
68
|
+
- - ">="
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
requirements: []
|
72
|
+
rubyforge_project:
|
73
|
+
rubygems_version: 2.2.2
|
74
|
+
signing_key:
|
75
|
+
specification_version: 4
|
76
|
+
summary: performance improvement
|
77
|
+
test_files: []
|