淘宝首页图片加载技术

来源：互联网发布：网络棋牌游戏充值编辑：程序博客网时间：2024/04/30 08:38

最近开发一个项目，要实现淘宝网首页图片加载类似的效果，就把淘宝源码拿下来分析了一下，淘宝的这个功能确实值得很不错，不但减轻了服务器压力还提高了用户体验。分析了一下核心代码：

script type="text/javascript">
srcname = "drc";
function addEvent(a,b,c){b=b.replace(/^on/i,"");a=document.getElementById(a)||a;if(a.addEventListener){a.addEventListener(b,c,false)}else{if(a.attachEvent){a.attachEvent("on"+b,c)}}return a}var delayload=function(){this.opsachr=function(){var c=0,a=0,b=0;if(/opera//(/d+/./d)/i.test(navigator.userAgent)){c=parseFloat(RegExp["/x241"])}if((/(/d+/./d)(/./d)?/s+safari/i.test(navigator.userAgent)&&!/chrome/i.test(navigator.userAgent))){a=parseFloat(RegExp["/x241"])}if(/chrome//(/d+/./d)/i.test(navigator.userAgent)){b=parseFloat(RegExp["/x241"])}return(a||b)};this.getId=function(a){return document.getElementById(a)};this.init=function(){this.nodename="img";this.nodeattr=srcname};this.getNextNode=function(){var b=this.nodename;var a=this.nodeattr;var d=document.getElementsByTagName(b);for(var c=0;c<d.length;c++){if(d[c].getAttribute(a)){return d[c]}}return null};this.delayLoader=function(c){var g=this,f;var e,i,d,b;if(/opera//(/d+/./d)/i.test(navigator.userAgent)){f=parseFloat(RegExp["/x241"])}if(g.opsachr()){e=window.innerHeight;i=document.body.scrollTop}else{if(f){e=document.body.clientHeight;i=document.body.scrollTop}else{e=document.documentElement.clientHeight;i=document.documentElement.scrollTop}}d=e+i+400;b=g.getNextNode();if(b==null){g.delayLoader=function(){};return}if(d>=g.getOffsetTop(b)){var a=b.getAttribute(srcname);b.setAttribute("src",a);b.removeAttribute(srcname)}else{return}var h=this;if(c){setTimeout(function(){h.delayLoader(true)},100)}};this.getOffsetTop=function(c){var b=0;var a=c;while(a!=null&&a!=document.body){b+=a.offsetTop;a=a.offsetParent}return b};this.bindUI=function(){var a=this;addEvent(window,"scroll",function(){a.delayLoader(1)});addEvent(window,"resize",function(){a.delayLoader(1)})}};addEvent(window,"load",function(b){var a=new delayload();a.init();a.delayLoader(1);a.bindUI()});
</script>

使用的时候要注意一下，这里不是<img src=""> 而是

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

srcname = "drc";
function addEvent(a,b,c){b=b.replace(/^on/i,"");a=document.getElementById(a)||a;if(a.addEventListener){a.addEventListener(b,c,false)}else{if(a.attachEvent){a.attachEvent("on"+b,c)}}return a}var delayload=function(){this.opsachr=function(){var c=0,a=0,b=0;if(/opera//(/d+/./d)/i.test(navigator.userAgent)){c=parseFloat(RegExp["/x241"])}if((/(/d+/./d)(/./d)?/s+safari/i.test(navigator.userAgent)&&!/chrome/i.test(navigator.userAgent))){a=parseFloat(RegExp["/x241"])}if(/chrome//(/d+/./d)/i.test(navigator.userAgent)){b=parseFloat(RegExp["/x241"])}return(a||b)};this.getId=function(a){return document.getElementById(a)};this.init=function(){this.nodename="img";this.nodeattr=srcname};this.getNextNode=function(){var b=this.nodename;var a=this.nodeattr;var d=document.getElementsByTagName(b);for(var c=0;c<d.length;c++){if(d[c].getAttribute(a)){return d[c]}}return null};this.delayLoader=function(c){var g=this,f;var e,i,d,b;if(/opera//(/d+/./d)/i.test(navigator.userAgent)){f=parseFloat(RegExp["/x241"])}if(g.opsachr()){e=window.innerHeight;i=document.body.scrollTop}else{if(f){e=document.body.clientHeight;i=document.body.scrollTop}else{e=document.documentElement.clientHeight;i=document.documentElement.scrollTop}}d=e+i+400;b=g.getNextNode();if(b==null){g.delayLoader=function(){};return}if(d>=g.getOffsetTop(b)){var a=b.getAttribute(srcname);b.setAttribute("src",a);b.removeAttribute(srcname)}else{return}var h=this;if(c){setTimeout(function(){h.delayLoader(true)},100)}};this.getOffsetTop=function(c){var b=0;var a=c;while(a!=null&&a!=document.body){b+=a.offsetTop;a=a.offsetParent}return b};this.bindUI=function(){var a=this;addEvent(window,"scroll",function(){a.delayLoader(1)});addEvent(window,"resize",function(){a.delayLoader(1)})}};addEvent(window,"load",function(b){var a=new delayload();a.init();a.delayLoader(1);a.bindUI()});
</script>

//这个地方图片最好用远程的还要多加几张效果更明显