https://www.vividred.net/js/plugin/jquery.queryloader2.js

1/*
2 * QueryLoader v2 - A simple script to create a preloader for images
3 *
4 * For instructions read the original post:
5 * http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
6 *
7 * Copyright (c) 2011 - Gaya Kessler
8 *
9 * Licensed under the MIT license:
10 *   http://www.opensource.org/licenses/mit-license.php
11 *
12 * Version:  2.2
13 * Last update: 03-04-2012
14 *
15 */
16(function($) {
17
18
19    if (!Array.prototype.indexOf)
20	   {
21	   Array.prototype.indexOf = function(elt /*, from*/)
22             {
23             var len  = this.length >>> 0;
24             var from = Number(arguments[1]) || 0;
25                 from = (from < 0)
26                      ? Math.ceil(from)
27                      : Math.floor(from);
28             if (from < 0)
29                 from += len;
30 
31                 for (; from < len; from++)
32                     {
33                     if (from in this &&
34                     this[from] === elt)
35                     return from;
36                     }
37             return -1;
38             };
39       }
40
41
42    var qLimages = new Array;
43    var qLdone = 0;
44    var qLdestroyed = false;
45
46    var qLimageContainer = "";
47    var qLoverlay = "";
48    var qLbar = "";
49    var qLpercentage = "";
50    var qLimageCounter = 0;
51    var qLstart = 0;
52
53    var qLoptions = {
54        onComplete: function () {},
55        backgroundColor: "#000",
56        barColor: "#fff",
57        barHeight: 1,
58        percentage: false,
59        deepSearch: true,
60        completeAnimation: "fade",
61        minimumTime: 100,
62        onLoadComplete: function () {
63            if (qLoptions.completeAnimation == "grow") {
64                var animationTime = 500;
65                var currentTime = new Date();
66                
67				if ((currentTime.getTime() - qLstart) < qLoptions.minimumTime) {
68                    animationTime = (qLoptions.minimumTime - (currentTime.getTime() - qLstart));
69                }
70
71                $(qLbar).stop().animate({
72                    "width": "100%"
73                }, animationTime, function () {
74                    $(this).animate({
75                        //top: "0%",
76                        //width: "100%",
77                        //height: "100%",
78						backgroundColor: '#fff'
79                    }, 500, function () {
80                        $(qLoverlay).fadeOut(500, function () {
81                            $(this).remove();
82                            qLoptions.onComplete();
83                        })
84                    });
85                });
86            } else {
87                $(qLoverlay).fadeOut(500, function () {
88                    $(qLoverlay).remove();
89                    qLoptions.onComplete();
90                });
91            }
92        }
93    };
94
95    var afterEach = function () {
96        //start timer
97        var currentTime = new Date();
98        qLstart = currentTime.getTime();
99
100        createPreloadContainer();
101        createOverlayLoader();
102    };
103
104    var createPreloadContainer = function() {
105        qLimageContainer = $("<div></div>").appendTo("body").css({
106            display: "none",
107            width: 0,
108            height: 0,
109            overflow: "hidden"
110        });
111        for (var i = 0; qLimages.length > i; i++) {
112            $.ajax({
113                url: qLimages[i],
114                type: 'HEAD',
115                complete: function(data) {
116                    if(!qLdestroyed){
117                        qLimageCounter++;
118                        addImageForPreload(this['url']);
119                    }
120                }
121            });
122        }
123    };
124
125    var addImageForPreload = function(url) {
126        var image = $("<img />").attr("src", url).bind("load", function () {
127            completeImageLoading();
128        }).appendTo(qLimageContainer);
129    };
130
131    var completeImageLoading = function () {
132        qLdone++;
133
134        var percentage = (qLdone / qLimageCounter) * 100;
135        $(qLbar).stop().animate({
136            width: percentage + "%",
137            minWidth: percentage + "%"
138        }, 200);
139
140        if (qLoptions.percentage == true) {
141            $(qLpercentage).text(Math.ceil(percentage) + "%");
142        }
143
144        if (qLdone == qLimageCounter) {
145            destroyQueryLoader();
146        }
147    };
148
149    var destroyQueryLoader = function () {
150        $(qLimageContainer).remove();
151        qLoptions.onLoadComplete();
152        qLdestroyed = true;
153    };
154
155    var createOverlayLoader = function () {
156        qLoverlay = $("<div id='qLoverlay'></div>").css({
157            width: "100%",
158            height: "100%",
159            backgroundColor: qLoptions.backgroundColor,
160            backgroundPosition: "fixed",
161            position: "fixed",
162            zIndex: 666999,
163            top: 0,
164            left: 0
165        }).appendTo("body");
166        qLbar = $("<div id='qLbar'></div>").css({
167            height: qLoptions.barHeight + "px",
168            marginTop: "-" + (qLoptions.barHeight / 2) + "px",
169            backgroundColor: qLoptions.barColor,
170            width: "0%",
171            position: "absolute",
172            top: "50%"
173        }).appendTo(qLoverlay);
174        if (qLoptions.percentage == true) {
175            qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
176                height: "40px",
177                width: "100px",
178                position: "absolute",
179                fontSize: "3em",
180                top: "50%",
181                left: "50%",
182                marginTop: "-" + (59 + qLoptions.barHeight) + "px",
183                textAlign: "center",
184                marginLeft: "-50px",
185                color: qLoptions.barColor
186            }).appendTo(qLoverlay);
187        }
188    };
189
190    var findImageInElement = function (element) {
191        var url = "";
192
193        if ($(element).css("background-image") != "none") {
194            var url = $(element).css("background-image");
195        } else if (typeof($(element).attr("src")) != "undefined" && element.nodeName.toLowerCase() == "img") {
196            var url = $(element).attr("src");
197        }
198
199        if (url.indexOf("gradient") == -1) {
200            url = url.replace(/url\(\"/g, "");
201            url = url.replace(/url\(/g, "");
202            url = url.replace(/\"\)/g, "");
203            url = url.replace(/\)/g, "");
204
205            var urls = url.split(", ");
206
207            for (var i = 0; i < urls.length; i++) {
208                if (urls[i].length > 0 && qLimages.indexOf(urls[i]) == -1) {
209                    var extra = "";
210                    if ($.browser.msie && $.browser.version < 9) {
211                        extra = "?" + Math.floor(Math.random() * 3000);
212                    }
213                    qLimages.push(urls[i] + extra);
214                }
215            }
216        }
217    }
218
219    $.fn.queryLoader2 = function(options) {
220        if(options) {
221            $.extend(qLoptions, options );
222        }
223
224        this.each(function() {
225            findImageInElement(this);
226            if (qLoptions.deepSearch == true) {
227                $(this).find("*:not(script)").each(function() {
228                    findImageInElement(this);
229                });
230            }
231        });
232
233        afterEach();
234
235        return this;
236    };
237
238})(jQuery);