下面是麦包包的方法：

前台方法

<img src2="真实地址" src="占位图片" />

加个正在下载中的背景的话用样式 {background:url(/app/webroot/images/loading.gif) no-repeat center;}

//lazyload
function lazyload(option){var settings={defObj:null,defHeight:-200};settings=$.extend(settings,option||{});var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");var pageTop=function(){return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight};var imgLoad=function(){defObj.each(function(){if($(this).offset().top<=pageTop()){var src2=$(this).attr("src2");if(src2){$(this).attr("src",src2).removeAttr("src2")}}})};imgLoad();$(window).bind("scroll",function(){imgLoad()})}

function txta_lazyload(obj,inobj){var objTop=function(){return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)+250};var obj=$(obj);var inobj=$(inobj);var obj_load=function(){var inhtml=inobj.text();if(inhtml!=''){if(obj.offset().top<=objTop()){obj.html(inhtml);inobj.text('')}}};obj_load();$(window).bind("scroll",function(){obj_load()})}

//我比较狠，对body内的对象都处理。
lazyload({ defObj: "body"});
//var dpmload = setTimeout(function (){lazyload({ defObj: ".lazybox"});},7000);
//if ($('#txt_popular').length) {txta_lazyload('#js_pop_elements','#txt_popular');}
//if ($('#txt_countdown').length) {txta_lazyload('#dom_index_countdown','#txt_countdown');}
// banner_top_slide
注意，要引入 jquery

官网地址：http://www.appelsiini.net/projects/lazyload

我另外一个项目中用到的是：

(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options)$.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));else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear")}else if(counter++>settings.failurelimit)return false});var temp=$.grep(elements,function(element){return !element.loaded});elements=$(temp)});this.each(function(){var self=this;if(undefined==$(self).attr("original"))$(self).attr("original",$(self).attr("src"));if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder)}else $(self).removeAttr("src");self.loaded=false}else self.loaded=true;$(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"))});if("scroll"!=settings.event)$(self).bind(settings.event,function(event){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.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()};$.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)

前台：

$(document).ready(function(){
                $("body").find("img").lazyload({effect : "fadeIn",placeholder : "http://www.phpec.com/images/pix.gif"});
            });