JS实现延迟载入图片

上脚本。说实话，随便构架，是边做边想，东西乱加上去整合出来的。

 

function DLimgs() {   var IFIE = document.all ? true : false;   if (IFIE)   {     var version = navigator.appVersion.split(";");     var trim_Version = version[1].replace(/[ ]/g, "");     if (trim_Version == "MSIE9.0")     {       trim_Version = 9     }   }   DLimgs.Setopacity = function(obj, config)   {     var opacity = "Alpha(opacity=" + config.op + ");";     obj.style.filter = opacity;     obj.style.opacity = config.op / 100   };   DLimgs.GetAbsoluteLocation = function(element)   {     if (arguments.length != 1 || element == null)     {       return null     }     var offsetTop = element.offsetTop;     var offsetLeft = element.offsetLeft;     var offsetWidth = element.offsetWidth;     var offsetHeight = element.offsetHeight;     while (element = element.offsetParent)     {       offsetTop += element.offsetTop;       offsetLeft += element.offsetLeft     }     return {       absoluteTop: offsetTop,       absoluteLeft: offsetLeft,       offsetWidth: offsetWidth,       offsetHeight: offsetHeight     }   }   var Dimgs = document.getElementsByTagName('Dimg');   var Timgs = [];   DLimgs.searchAttr = function(ST, attrName)   {     attrName = " " + attrName + "";     if ( !! ST.match(attrName))     {       var sl = ST.split(attrName)[1]       return sl.slice(1, sl.search(sl.slice(0, 1) + " "))     }     return ""   };   DLimgs.main = function()   {     clearTimeout(DLimgs.onscroll);     DLimgs.onscroll = setTimeout(function()     {       var H = document.body.clientHeight;       var W = document.body.clientWidth;       for (var i = Timgs.length; i < Dimgs.length;)       {         var sTop = document.body.scrollTop + document.documentElement.scrollTop;         var EAb = DLimgs.GetAbsoluteLocation(Dimgs[i]);         if (EAb.absoluteTop < (H + sTop))         {           Timgs[i] = {};           Timgs[i].outerHTML = Dimgs[i].outerHTML.replace('<dimg', '<img').replace('</dimg', '</img').replace('<DIMG', '<img');           {             Timgs[i].id = DLimgs.searchAttr(Timgs[i].outerHTML, 'id');             if (Timgs[i].id === "")             {               Timgs[i].id = "DLimgs" + Math.random();               var outerHTML = Timgs[i].outerHTML.replace('<img', '<img id=\"' + Timgs[i].id + '\"');               Timgs[i].outerHTML = Timgs[i].outerHTML.replace('<img', '<img id=\"' + Timgs[i].id + '\"')             }           }           var config = {};           {             var configAttr = DLimgs.searchAttr(Timgs[i].outerHTML, 'config');             if (!configAttr)             {               config = DLimgs.animateConfig             }             else             {               try               {                 config = eval(configAttr)               }               catch (e)               {                 alert(e);                 config = DLimgs.animateConfig               }             }           }           {             var style = DLimgs.searchAttr(Timgs[i].outerHTML, 'style');             if (!style)             {               if (IFIE)               {                 Timgs[i].outerHTML = Timgs[i].outerHTML.replace('<img', '<img style=\" filter:Alpha(opacity=' + config.op + ');\"')               }               else               {                 Timgs[i].outerHTML = Timgs[i].outerHTML.replace('<img', '<img style=\" opacity:' + (config.op / 100) + ';\"')               }             }             else             {               if (IFIE)               {                 Timgs[i].outerHTML = Timgs[i].outerHTML.replace(style, 'filter:Alpha(opacity=' + config.op + ');' + style)               }               else               {                 Timgs[i].outerHTML = Timgs[i].outerHTML.replace(style, 'opacity:' + (config.op / 100) + ';' + style)               }             }           }           Dimgs[i].outerHTML = Timgs[i].outerHTML;           Timgs[i] = document.getElementById(Timgs[i].id);           DLimgs.opacityAnimate(Timgs[i], config)         }         else         {           ++i         }       }     }, 200)   };   DLimgs.animateConfig = {     op: 10,     Bop: 10,     Eop: 100,     ATime: 1000   };   DLimgs.opacityAnimate = function(obj, config)   {     try     {       config.Frames = 0       var Frames = config.ATime / 20;       obj.Frames = setInterval(function()       {         if (Frames < config.Frames)         {           clearInterval(obj.Frames);           return         }         else         {           config.op = ((config.Eop - config.Bop) * config.Frames / Frames) + config.Bop;           DLimgs.Setopacity(obj, config);           config.Frames++         }       }, 20)     }     catch (e)     {       alert(e);       config.op = config.Eop;       DLimgs.Setopacity(obj, config)     }   };   DLimgs.main() };

在HTML页面中只要引入脚本文件就好了。
只能保证它尽量独立，自定义配置接口还没有做，只是个半成品，能用，但效果死死的…………懂JS的人倒是很容易改。

DLimgs.animateConfig = { op: 10, Bop: 10, Eop: 100, ATime: 1000 };

这个是渐变显示的特效配置，op一般不用管，是内部自己需要的，设置成和Bop一样就好，Bop是开始的透明度，Eop是结束的透明度，Atime是动画时间，默认1000mm（1m）。这个是默认的动画设置。要对单张图片进行设置，就在自定义标签里面(默认是<Dimg />)加上config属性，属性内容和DLimgs.animateConfig一样，也就是config="{op:.....}"配置信息要完整。

其他的也没有什么好说的，贴一个HTML页面的例子，很简单，只要把你的<img>标签替换成<Dimg>就可以了。

<dimg alt="test" height="150px" class="Demo" title="自定义标签" src="./images/10109200.jpg" />

然后启用

 

window.onload = function() {   DLimgs() }; window.onscroll = function() {   DLimgs() };

其他就不用管鸟……。