https://www.tumsrivichai.com/template/lib_js/js/jquery.lazyload.js

1/*
2 * Lazy Load - jQuery plugin for lazy loading images
3 *
4 * Copyright (c) 2007-2009 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.5.0
13 *
14 */
15/*:tag: 21/01/2010 0150387 neeranart not replace image from system */
16/*:tag: 25/01/2010 0105370 neeranart add attr of src (lazyskip) for loaded before visible */
17
18(function($) {
19
20    $.fn.lazyload = function(options) {
21        var settings = {
22            threshold    : 0,
23            failurelimit : 0,
24            event        : "scroll",
25            effect       : "show",
26            container    : window,
27            lazyskip	: "gif"
28        };
29                
30        if(options) {
31            $.extend(settings, options);
32        }
33
34        /* Fire one scroll event per scroll. Not one scroll event per image. */
35        var elements = this;
36        if ("scroll" == settings.event) {
37            $(settings.container).bind("scroll", function(event) {
38                
39                var counter = 0;
40                elements.each(function() {
41                    if ($.abovethetop(this, settings) ||
42                        $.leftofbegin(this, settings)) {
43                            /* Nothing. */
44                    } else if (!$.belowthefold(this, settings) &&
45                        !$.rightoffold(this, settings)) {
46                            $(this).trigger("appear");
47                    } else {
48                        if (counter++ > settings.failurelimit) {
49                            return false;
50                        }
51                    }
52                });
53                /* Remove image from array so it is not looped next time. */
54                var temp = $.grep(elements, function(element) {
55                    return !element.loaded;
56                });
57                elements = $(temp);
58            });
59        }
60        
61        this.each(function() {
62            var self = this;
63            
64            /* Save original only if it is not defined in HTML. */
65            if (undefined == $(self).attr("original")) {
66                $(self).attr("original", $(self).attr("src"));     
67            }
68            var skipimg = "."+settings.lazyskip;
69            if (	$(self).attr("src").search("images_profiles")=="-1" &&
70            		$(self).attr("src").search("lib_icon")=="-1" &&
71            		$(self).attr("src").search("lib_images")=="-1" &&
72            		($(self).attr("src").search(skipimg)=="-1"	|| 	"none" == settings.lazyskip) &&
73            		("scroll" != settings.event || 
74	                    undefined == $(self).attr("src") || 
75	                    settings.placeholder == $(self).attr("src") || 
76	                    ($.abovethetop(self, settings) ||
77	                     $.leftofbegin(self, settings) || 
78	                     $.belowthefold(self, settings) || 
79	                     $.rightoffold(self, settings) )
80	                 )
81                ){
82                
83                if (settings.placeholder) {
84                    $(self).attr("src", settings.placeholder);      
85                } else {
86                    $(self).removeAttr("src");
87                }
88                self.loaded = false;
89            } else {
90                self.loaded = true;
91            }
92            
93            /* When appear is triggered load original image. */
94            $(self).one("appear", function() {
95                if (!this.loaded) {
96                    $("<img />")
97                        .bind("load", function() {
98                            $(self)
99                                .hide()
100                                .attr("src", $(self).attr("original"))
101                                [settings.effect](settings.effectspeed);
102                            self.loaded = true;
103                        })
104                        .attr("src", $(self).attr("original"));
105                };
106            });
107
108            /* When wanted event is triggered load original image */
109            /* by triggering appear.                              */
110            if ("scroll" != settings.event) {
111                $(self).bind(settings.event, function(event) {
112                    if (!self.loaded) {
113                        $(self).trigger("appear");
114                    }
115                });
116            }
117        });
118        
119        /* Force initial check if images should appear. */
120        $(settings.container).trigger(settings.event);
121        
122        return this;
123
124    };
125
126    /* Convenience methods in jQuery namespace.           */
127    /* Use as  $.belowthefold(element, {threshold : 100, container : window}

127) */
128
129    $.belowthefold = function(element, settings) {
130        if (settings.container === undefined || settings.container === window) {
131            var fold = $(window).height() + $(window).scrollTop();
132        } else {
133            var fold = $(settings.container).offset().top + $(settings.container).height();
134        }
135        return fold <= $(element).offset().top - settings.threshold;
136    };
137    
138    $.rightoffold = function(element, settings) {
139        if (settings.container === undefined || settings.container === window) {
140            var fold = $(window).width() + $(window).scrollLeft();
141        } else {
142            var fold = $(settings.container).offset().left + $(settings.container).width();
143        }
144        return fold <= $(element).offset().left - settings.threshold;
145    };
146        
147    $.abovethetop = function(element, settings) {
148        if (settings.container === undefined || settings.container === window) {
149            var fold = $(window).scrollTop();
150        } else {
151            var fold = $(settings.container).offset().top;
152        }
153        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
154    };
155    
156    $.leftofbegin = function(element, settings) {
157        if (settings.container === undefined || settings.container === window) {
158            var fold = $(window).scrollLeft();
159        } else {
160            var fold = $(settings.container).offset().left;
161        }
162        return fold >= $(element).offset().left + settings.threshold + $(element).width();
163    };
164    /* Custom selectors for your convenience.   */
165    /* Use as $("img:below-the-fold").something() */
166
167    $.extend($.expr[':'], {
168        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
169        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
170        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
171        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
172    });
173    
174})(jQuery);