├── README.md
└── jQuery.loadScroll.js
/README.md:
--------------------------------------------------------------------------------
1 | # jQuery.loadScroll
2 | Simple jQuery extension for dynamically loading images while scrolling. Intended for image-heavy websites to save bandwidth and decrease intial load time.
3 |
4 | ## Installation
5 | Include the latest version of [jQuery](http://jquery.com/download) and `jQuery.loadScroll.js` in the `` of your HTML document:
6 | ```html
7 |
8 |
9 | ```
10 | ## How to Use
11 | Reference the `loadScroll()` method and use the `data-src` attribute for all dynamic loading images. The `data-src` changes to the standard `src` attribute as the image(s) enter the viewport. Placeholder images are optional. See the live demo: [code.nath.co/loadScroll](http://code.nath.co/loadScroll)
12 |
13 | **HTML**
14 | ```html
15 |
16 | 
17 |
18 |
19 | 
20 | ```
21 |
22 | **jQuery**
23 | ```javascript
24 | $(function() {
25 |
26 | // Default
27 | $('img').loadScroll();
28 |
29 | // Custom fadeIn Duration
30 | $('img').loadScroll(500);
31 |
32 | });
33 | ```
34 |
35 | ## Browser Support
36 | – Google Chrome
37 | – Safari ( Desktop & Mobile )
38 | – Internet Explorer ( 8, 9, 10+ )
39 | – Firefox
40 | – Opera ( Not Tested )
41 |
42 | ## Release Notes
43 | **jQuery.loadScroll 1.0**
44 | – Initial Release
45 | **jQuery.loadScroll 1.0.1**
46 | – Changed `isrc` attribute to `data-src` for HTML validation
47 | – Added paramater for `fadeIn` duration
48 |
49 | ## Feedback
50 | If you discover any issues or have questions regarding usage, please send a message to [code@nath.co](mailto:code@nath.co) or find me on GitHub [@nathco](https://github.com/nathco).
--------------------------------------------------------------------------------
/jQuery.loadScroll.js:
--------------------------------------------------------------------------------
1 | // Plugin: jQuery.loadScroll
2 | // Source: github.com/nathco/jQuery.loadScroll
3 | // Author: Nathan Rutzky
4 | // Update: 1.0.1
5 |
6 | (function($) {
7 |
8 | $.fn.loadScroll = function(duration) {
9 |
10 | var $window = $(window),
11 | images = this,
12 | inview,
13 | loaded;
14 |
15 | images.one('loadScroll', function() {
16 |
17 | if (this.getAttribute('data-src')) {
18 | this.setAttribute('src',
19 | this.getAttribute('data-src'));
20 | this.removeAttribute('data-src');
21 |
22 | if (duration) {
23 |
24 | $(this).hide()
25 | .fadeIn(duration)
26 | .add('img')
27 | .removeAttr('style');
28 |
29 | } else return false;
30 | }
31 | });
32 |
33 | $window.scroll(function() {
34 |
35 | inview = images.filter(function() {
36 |
37 | var a = $window.scrollTop(),
38 | b = $window.height(),
39 | c = $(this).offset().top,
40 | d = $(this).height();
41 |
42 | return c + d >= a && c <= a + b;
43 |
44 | });
45 |
46 | loaded = inview.trigger('loadScroll');
47 | images = images.not(loaded);
48 |
49 | });
50 | };
51 |
52 | })(jQuery);
--------------------------------------------------------------------------------
17 | 
18 | 
19 | 
20 | ```
21 |
22 | **jQuery**
23 | ```javascript
24 | $(function() {
25 |
26 | // Default
27 | $('img').loadScroll();
28 |
29 | // Custom fadeIn Duration
30 | $('img').loadScroll(500);
31 |
32 | });
33 | ```
34 |
35 | ## Browser Support
36 | – Google Chrome
37 | – Safari ( Desktop & Mobile )
38 | – Internet Explorer ( 8, 9, 10+ )
39 | – Firefox
40 | – Opera ( Not Tested )
41 |
42 | ## Release Notes
43 | **jQuery.loadScroll 1.0**
44 | – Initial Release
45 | **jQuery.loadScroll 1.0.1**
46 | – Changed `isrc` attribute to `data-src` for HTML validation
47 | – Added paramater for `fadeIn` duration
48 |
49 | ## Feedback
50 | If you discover any issues or have questions regarding usage, please send a message to [code@nath.co](mailto:code@nath.co) or find me on GitHub [@nathco](https://github.com/nathco).
--------------------------------------------------------------------------------
/jQuery.loadScroll.js:
--------------------------------------------------------------------------------
1 | // Plugin: jQuery.loadScroll
2 | // Source: github.com/nathco/jQuery.loadScroll
3 | // Author: Nathan Rutzky
4 | // Update: 1.0.1
5 |
6 | (function($) {
7 |
8 | $.fn.loadScroll = function(duration) {
9 |
10 | var $window = $(window),
11 | images = this,
12 | inview,
13 | loaded;
14 |
15 | images.one('loadScroll', function() {
16 |
17 | if (this.getAttribute('data-src')) {
18 | this.setAttribute('src',
19 | this.getAttribute('data-src'));
20 | this.removeAttribute('data-src');
21 |
22 | if (duration) {
23 |
24 | $(this).hide()
25 | .fadeIn(duration)
26 | .add('img')
27 | .removeAttr('style');
28 |
29 | } else return false;
30 | }
31 | });
32 |
33 | $window.scroll(function() {
34 |
35 | inview = images.filter(function() {
36 |
37 | var a = $window.scrollTop(),
38 | b = $window.height(),
39 | c = $(this).offset().top,
40 | d = $(this).height();
41 |
42 | return c + d >= a && c <= a + b;
43 |
44 | });
45 |
46 | loaded = inview.trigger('loadScroll');
47 | images = images.not(loaded);
48 |
49 | });
50 | };
51 |
52 | })(jQuery);
--------------------------------------------------------------------------------