LazyLoad.js及scrollLoading.js

時間 2020-06-28

標籤 lazyload.js lazyload scrollloading.js scrollloading 欄目 JavaScript 简体版

原文原文鏈接

http://blog.csdn.net/ning109314/article/details/7042829javascript

目前圖片延遲加載主要分兩大塊，一是觸發加載（根據滾動條位置加載圖片）；二是自動預加載（加載完首屏後n秒後自動加載其餘位置的圖片）。如今最流行使用的就是LazyLoad.js及scrollLoading.js這兩個用Jquery寫的小插件。php

1、LazyLoad實現：html

網上找到一個更好點的處理方式，如下方式轉自http://www.poluoluo.com/jzxy/201110/145261.html：jquery

//首先用JQ判斷瀏覽器類型及版本，若是是IE8如下的瀏覽器就用effect=show，不然就用effect=fadeIn，判斷瀏覽器版本函數以下
function checkbrowse() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];
var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';
var v = (ua.match(new RegExp(r)) || [])[1];
jQuery.browser.is = is;
jQuery.browser.ver = v;
return {
'is': jQuery.browser.is,
'ver': jQuery.browser.ver
}
}瀏覽器

//改造Jquery.LazyLoad.js函數，根據瀏覽器版原本顯示不一樣的濾鏡效果
var public = checkbrowse();
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready(function($) {
$("img").lazyload({
placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif",
effect: showeffect,
failurelimit: 10
})
});
</script>app

html:ide

<img src="/js/lazyload/pixel.gif" original="真實圖片路徑" />函數

而LazyLoad只是給你一個延遲加載的假象，每次圖片都會加載兩次，徹底就是一個假象的延遲加載。能夠修改LazyLoad文件實現真實延遲加載，本人比較懶，就直接在網上找了一個修改好的，嘿嘿

 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 (function ($) {
16     $.fn.lazyload = function (options) {
17         var settings = {
18             threshold: 0,
19             failurelimit: 0,
20             event: "scroll",
21             effect: "show",
22             container: window
23         };
24         if (options) {
25             $.extend(settings, options);
26         }
27         /* Fire one scroll event per scroll. Not one scroll event per image. */
28         var elements = this;
29         if ("scroll" == settings.event) {
30             $(settings.container).bind("scroll", function (event) {
31                 var counter = 0;
32                 elements.each(function () {
33                     if ($.abovethetop(this, settings) ||
34 $.leftofbegin(this, settings)) {
35                         /* Nothing. */
36                     } else if (!$.belowthefold(this, settings) &&
37 !$.rightoffold(this, settings)) {
38                         $(this).trigger("appear");
39                     } else {
40                         if (counter++ > settings.failurelimit) {
41                             return false;
42                         }
43                     }
44                 });
45                 /* Remove image from array so it is not looped next time. */
46                 var temp = $.grep(elements, function (element) {
47                     return !element.loaded;
48                 });
49                 elements = $(temp);
50             });
51         }
52         this.each(function () {
53             var self = this;
54             //刪除的代碼

 1             /* When appear is triggered load original image. */
 2             $(self).one("appear", function () {
 3                 if (!this.loaded) {
 4                     $("<img />")
 5 .bind("load", function () {
 6     $(self)
 7 .hide()
 8 .attr("src", $(self).attr("original"))
 9 [settings.effect](settings.effectspeed);
10     self.loaded = true;
11 })
12 .attr("src", $(self).attr("original"));
13                 };
14             });
15             /* When wanted event is triggered load original image */
16             /* by triggering appear.                              */
17             if ("scroll" != settings.event) {
18                 $(self).bind(settings.event, function (event) {
19                     if (!self.loaded) {
20                         $(self).trigger("appear");
21                     }
22                 });
23             }
24         });
25         /* Force initial check if images should appear. */
26         $(settings.container).trigger(settings.event);
27         return this;
28     };
29     /* Convenience methods in jQuery namespace.           */
30     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
31     $.belowthefold = function (element, settings) {
32         if (settings.container === undefined || settings.container === window) {
33             var fold = $(window).height() + $(window).scrollTop();
34         } else {
35             var fold = $(settings.container).offset().top + $(settings.container).height();
36         }
37         return fold <= $(element).offset().top - settings.threshold;
38     };
39     $.rightoffold = function (element, settings) {
40         if (settings.container === undefined || settings.container === window) {
41             var fold = $(window).width() + $(window).scrollLeft();
42         } else {
43             var fold = $(settings.container).offset().left + $(settings.container).width();
44         }
45         return fold <= $(element).offset().left - settings.threshold;
46     };
47     $.abovethetop = function (element, settings) {
48         if (settings.container === undefined || settings.container === window) {
49             var fold = $(window).scrollTop();
50         } else {
51             var fold = $(settings.container).offset().top;
52         }
53         return fold >= $(element).offset().top + settings.threshold + $(element).height();
54     };
55     $.leftofbegin = function (element, settings) {
56         if (settings.container === undefined || settings.container === window) {
57             var fold = $(window).scrollLeft();
58         } else {
59             var fold = $(settings.container).offset().left;
60         }
61         return fold >= $(element).offset().left + settings.threshold + $(element).width();
62     };
63     /* Custom selectors for your convenience.   */
64     /* Use as $("img:below-the-fold").something() */
65     $.extend($.expr[':'], {
66         "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
67         "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
68         "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
69         "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
70     });
71 })(jQuery);