1、jq 图片延迟加载1.引用 JQ： JQ 没有就去网上 DOWN2.把下面贴的代码保存为 JS 文件添加引用3.调用语句，和 JQ 一摸一样，也可以而这样调用,记得是在页面底部，标签之前调用$(“img“).lazyload(); 或者这样调用$(“img“).lazyload( placeholder: “images/blue-loading.gif“, effect:“fadeIn“ ); 当然你得先有一张 blue-loading.gif 的图片，然后得在 images 文件夹下面才可以这样调用，effect 设置显示效果，默认是 SHOW 的效果，4.前台的 IMG 标签里不要放 S
2、RC，请放入 original 标签。比如 ，这样就不会在页面一打开的时候加载图片了，也是最关键的地方，或者说是项目的后台代码里面唯一需要改动的地方。好，下面是代码放送,请注明出处 http:/ 2010 年 3 月 26 日发表于博客园的泡泡网控件有代码有真相 代码(function($) $.fn.lazyload = function(options) var settings = threshold: 0,failurelimit: 0,event: “scroll“,effect: “show“,/默认效果为 showcontainer: window;if (options) $.
3、extend(settings, options);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) self.loaded = false;else if (!$.belowthefold(this, settings) $(t
4、his).trigger(“appear“);else self.loaded = true;if (counter+ settings.failurelimit) return false;);var temp = $.grep(elements, function(element) return !element.loaded;);elements = $(temp););this.each(function() var self = this;if (settings.placeholder) $(self).attr(“src“, settings.placeholder); $(se
5、lf).one(“appear“, function() if (!this.loaded) $(“).bind(“load“, function() $(self).hide().attr(“src“, $(self).attr(“original“)settings.effect(settings.effectspeed);self.loaded = true;).attr(“src“, $(self).attr(“original“););if (“scroll“ != settings.event) $(self).bind(settings.event, function(event
6、) if (!self.loaded) $(self).trigger(“appear“);););$(settings.container).trigger(settings.event);return this;$.belowthefold = function(element, settings) if (settings.container = undefined | settings.container = window) var fold = $(window).height() + $(window).scrollTop(); else var fold = $(settings
7、.container).offset().top + $(settings.container).height();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 =
8、$(settings.container).offset().left;return fold = $(element).offset().left + settings.threshold + $(element).width();$.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);
