LazyLoad.js及scrollLoading.js延迟加载网页图片

cyjsky 2016-11-15

目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片);二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片)。现在最流行使用的就是LazyLoad.js及scrollLoading.js这两个用jQuery写的小插件。

一、LazyLoad实现:

<script type="text/JavaScript" src="/js/lazyload/jquery.min.js"></script>
<script type="text/javascript" src="/js/lazyload/lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
effect : "fadeIn"
});
});
</script>

网上找到一个更好点的处理方式,以下方式转自http://www.poluoluo.com/jzxy/201110/145261.html

<script type="text/javascript">

//首先用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>

html:

<img    src="/js/lazyload/pixel.gif" original="真实图片路径" />

而LazyLoad只是给你一个延迟加载的假象,每次图片都会加载两次,完全就是一个假象的延迟加载。可以修改LazyLoad文件实现真实延迟加载,本人比较懒,就直接在网上找了一个修改好的,嘿嘿

[javascript] view plain copy
  1. /* 
  2. * Lazy Load - jQuery plugin for lazy loading images 
  3. * Copyright (c) 2007-2009 Mika Tuupola 
  4. * Licensed under the MIT license: 
  5. *   http://www.opensource.org/licenses/mit-license.php 
  6. * Project home: 
  7. *   http://www.appelsiini.net/projects/lazyload 
  8. * Version:  1.5.0 
  9. */  
  10. (function ($) {  
  11.     $.fn.lazyload = function (options) {  
  12.         var settings = {  
  13.             threshold: 0,  
  14.             failurelimit: 0,  
  15.             event: "scroll",  
  16.             effect: "show",  
  17.             container: window  
  18.         };  
  19.         if (options) {  
  20.             $.extend(settings, options);  
  21.         }  
  22.         /* Fire one scroll event per scroll. Not one scroll event per image. */  
  23.         var elements = this;  
  24.         if ("scroll" == settings.event) {  
  25.             $(settings.container).bind("scroll", function (event) {  
  26.                 var counter = 0;  
  27.                 elements.each(function () {  
  28.                     if ($.abovethetop(this, settings) ||  
  29. $.leftofbegin(this, settings)) {  
  30.                         /* Nothing. */  
  31.                     } else if (!$.belowthefold(this, settings) &&  
  32. !$.rightoffold(this, settings)) {  
  33.                         $(this).trigger("appear");  
  34.                     } else {  
  35.                         if (counter++ > settings.failurelimit) {  
  36.                             return false;  
  37.                         }  
  38.                     }  
  39.                 });  
  40.                 /* Remove image from array so it is not looped next time. */  
  41.                 var temp = $.grep(elements, function (element) {  
  42.                     return !element.loaded;  
  43.                 });  
  44.                 elements = $(temp);  
  45.             });  
  46.         }  
  47.         this.each(function () {  
  48.             var self = this;  
  49.             //删除的代码  
[javascript] view plain copy
  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);  

二、scrollLoading实现

<script src="/js/lazyload/jquery.scrollLoading.js" type="text/javascript"></script><script type="text/javascript" src="/js/lazyload//jquery_002.js"></script>
<script type="text/javascript" src="/js/lazyload//jquery.js"></script>
<script>
$(function() {
 $(".scrollLoading").scrollLoading(); 
});
</script>

HTML:

<img class="scrollLoading" style="background: url(&quot;/js/lazyload/pixel.gif&quot;) no-repeat scroll center center transparent;" src="/js/lazyload/pixel.gif" style="WIDTH: 526px; HEIGHT: 293px" data-url="真实路径"/>

scrollLoading的实现相对而言比较麻烦一下

如果需要对应的JS包请去下载:

http://download.csdn.net/detail/ning109314/3882760

相关推荐