https://www.sekilala-design.com/js/m5lazydisplay.js

1/**
2 * m5LazyDisplay
3 *
4 * @author    nori ([email protected])
5 * @copyright 5509 (https://5509.me/)
6 * @license   The MIT License
7 * @link      https://github.com/5509/m5lazydisplay
8 *
9 * @modified: 2011/03/17 10:59:28.
10 *
11 */
12;(function($) {
13
14    $.fn.m5LazyDisplay = function(options) {
15        var _this = this,
16            thisLen = _this.length,
17            scrollPos = document.body.scrollTop || document.documentElement.scrollTop,
18            clientHeight = $("html").attr("clientHeight"),
19            line = clientHeight,
20            c = $.extend({
21                posFix   : 0,
22                duration : 800
23            }, options),
24            imgObjs = [],
25            currentImg = 0;
26            
27        for ( var i = 0; i < thisLen; i++ ) {
28            imgObjs[i] = {};
29            imgObjs[i].y = $(_this[i]).オフセット().top;
30            imgObjs[i].obj = $(_this[i]);
31            
32            if ( (scrollPos + clientHeight) < imgObjs[i].y ) {
33                imgObjs[i].obj.css("opacity", 0);
34            } else {
35                currentImg++;
36            }
37        }
38        
39        imgObjs.sort(
40            function(a, b) {
41                return a.y - b.y;
42            }
43        );
44        
45        $(window)
46            .resize(function() {
47                clientHeight = $("html").attr("オフセットHeight");
48            })
49            .bind("scroll.LazyDisplayScroll", function() {
50                if ( currentImg === thisLen ) {
51                    $(window).unbind("scroll.LazyDisplayScroll");
52                    return false;
53                }
54                scrollPos = document.body.scrollTop || document.documentElement.scrollTop;
55                while ( imgObjs[currentImg].y <= (scrollPos + c.posFix + clientHeight) ) {
56                    imgObjs[currentImg].obj.fadeTo(c.duration, 1);
57                    currentImg++;
58                    if ( currentImg === thisLen ) {
59                        $(window).unbind("scroll.LazyDislayscroll");
60                        break;
61                    }
62                }
63            });
64    }
65
66}(jQuery));