LazyLoad.js及scrollLoading.js

 

LazyLoad.js及scrollLoading.js

原文链接：http://blog.csdn.net/ning109314/article/details/7042829 

目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后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文件实现真实延迟加载，本人比较懒，就直接在网上找了一个修改好的，嘿嘿

 /*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.5.0
 *
 */
 (function ($) {
     $.fn.lazyload = function (options) {
         var settings = {
             threshold: 0,
             failurelimit: 0,
             event: "scroll",
             effect: "show",
             container: window
         };
         if (options) {
             $.extend(settings, options);
         }
         /* Fire one scroll event per scroll. Not one scroll event per image. */
         var elements = this;
         if ("scroll" == settings.event) {
             $(settings.container).bind("scroll", function (event) {
                 var counter = 0;
                 elements.each(function () {
                     if ($.abovethetop(this, settings) ||
 $.leftofbegin(this, settings)) {
                         /* Nothing. */
                     } else if (!$.belowthefold(this, settings) &&
 !$.rightoffold(this, settings)) {
                         $(this).trigger("appear");
                     } else {
                         if (counter++ > settings.failurelimit) {
                             return false;
                         }
                     }
                 });
                 /* Remove image from array so it is not looped next time. */
                 var temp = $.grep(elements, function (element) {
                     return !element.loaded;
                 });
                 elements = $(temp);
             });
         }
         this.each(function () {
             var self = this;
             //删除的代码

             /* When appear is triggered load original image. */
             $(self).one("appear", function () {
                 if (!this.loaded) {
                     $("<img />")
 .bind("load", function () {
     $(self)
 .hide()
 .attr("src", $(self).attr("original"))
 [settings.effect](settings.effectspeed);
     self.loaded = true;
 })
 .attr("src", $(self).attr("original"));
                 };
             });
             /* When wanted event is triggered load original image */
             /* by triggering appear.                              */
             if ("scroll" != settings.event) {
                 $(self).bind(settings.event, function (event) {
                     if (!self.loaded) {
                         $(self).trigger("appear");
                     }
                 });
             }
         });
         /* Force initial check if images should appear. */
         $(settings.container).trigger(settings.event);
         return this;
     };
     /* Convenience methods in jQuery namespace.           */
     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
     $.belowthefold = function (element, settings) {
         if (settings.container === undefined || settings.container === window) {
             var fold = $(window).height() + $(window).scrollTop();
         } else {
             var fold = $(settings.container).offset().top + $(settings.container).height();
         }
         return fold <= $(element).offset().top - settings.threshold;
     };
     $.rightoffold = function (element, settings) {
         if (settings.container === undefined || settings.container === window) {
             var fold = $(window).width() + $(window).scrollLeft();
         } else {
             var fold = $(settings.container).offset().left + $(settings.container).width();
         }
         return fold <= $(element).offset().left - settings.threshold;
     };
     $.abovethetop = function (element, settings) {
         if (settings.container === undefined || settings.container === window) {
             var fold = $(window).scrollTop();
         } else {
             var fold = $(settings.container).offset().top;
         }
         return fold >= $(element).offset().top + settings.threshold + $(element).height();
     };
     $.leftofbegin = function (element, settings) {
         if (settings.container === undefined || settings.container === window) {
             var fold = $(window).scrollLeft();
         } else {
             var fold = $(settings.container).offset().left;
         }
         return fold >= $(element).offset().left + settings.threshold + $(element).width();
     };
     /* Custom selectors for your convenience.   */
     /* Use as $("img:below-the-fold").something() */
     $.extend($.expr[':'], {
         "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
         "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
         "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
         "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
     });
 })(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