javascript js 图片延时 延迟 加载代码的改进. 网上的lazyLoad.init()

lazyLoad=(function(){var map_element={};var element_obj=[];var download_count=0;var last_offset=-1;var doc_body;var doc_element;var lazy_load_tag;function initVar(tags){doc_body=document.body;doc_element=document.compatMode=='BackCompat'?doc_body:document.documentElement;lazy_load_tag=tags||["img","iframe"];};function initElementMap(){for(var i=0,len=lazy_load_tag.length;i<len;i++){var el=document.getElementsByTagName(lazy_load_tag[i]);for(var j=0,len2=el.length;j<len2;j++){if(typeof(el[j])=="object"&&el[j].getAttribute("lazy_src")){element_obj.push(el[j]);}}}
for(var i=0,len=element_obj.length;i<len;i++){var o_img=element_obj[i];var t_index=getAbsoluteTop(o_img);if(map_element[t_index]){map_element[t_index].push(i);}else{var t_array=[];t_array[0]=i;map_element[t_index]=t_array;download_count++;}}};function initDownloadListen(){if(!download_count)return;var offset=(window.MessageEvent&&!document.getBoxObjectFor)?document.documentElement.scrollTop+document.body.scrollTop:doc_element.scrollTop;var visio_offset=offset+doc_element.clientHeight;$("#ctop").html($("#ctop").html()+" | ("+offset+","+visio_offset+" | "+element_obj.length+")");if(last_offset==visio_offset){setTimeout(initDownloadListen,500);return;}
last_offset=visio_offset;var visio_height=doc_element.clientHeight;var img_show_height=visio_height+offset;for(var key in map_element){if(img_show_height>key){var t_o=map_element[key];var img_vl=t_o.length;for(var l=0;l<img_vl;l++){element_obj[t_o[l]].src=element_obj[t_o[l]].getAttribute("lazy_src");}
delete map_element[key];download_count--;}}
setTimeout(initDownloadListen,500);};function getAbsoluteTop(element){if(arguments.length!=1||element==null){return null;}
var offsetTop=element.offsetTop;while(element=element.offsetParent){offsetTop+=element.offsetTop;}
return offsetTop;}
function init(tags){initVar(tags);initElementMap();initDownloadListen();};return{init:init}})();

原文的function initDownloadListen()这个函数里的var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop

在firefox里offset 总为0,上面的代码已经改成var offset = (window.MessageEvent && !document.getBoxObjectFor) ? document.documentElement.scrollTop+document.body.scrollTop : doc_element.scrollTop

改完后已经在firefox里运行通过了.

另外作一点改进,使得在等待图片下载时显示等待的图片,下载完后显示需要显示的图片,改进后的代码如下:

var lljs_imgsrcattr="d-imgsrc";lazyLoad=(function(){var ilattr=lljs_imgsrcattr;var map_element={};var element_obj=[];var download_count=0;var last_offset=-1;var doc_body;var doc_element;var lazy_load_tag;function initVar(tags){doc_body=document.body;doc_element=document.compatMode=='BackCompat'?doc_body:document.documentElement;lazy_load_tag=tags||["img","iframe"]};function initElementMap(){for(var i=0,len=lazy_load_tag.length;i<len;i++){var el=document.getElementsByTagName(lazy_load_tag[i]);for(var j=0,len2=el.length;j<len2;j++){if(typeof(el[j])=="object"&&el[j].getAttribute(ilattr)){element_obj.push(el[j])}}};for(var i=0,len=element_obj.length;i<len;i++){var o_img=element_obj[i];var t_index=getAbsoluteTop(o_img);if(map_element[t_index]){map_element[t_index].push(i)}else{var t_array=[];t_array[0]=i;map_element[t_index]=t_array;download_count++;}}};function initDownloadListen(){if(!download_count)return;var offset=(window.MessageEvent&&!document.getBoxObjectFor)?document.documentElement.scrollTop+document.body.scrollTop:doc_element.scrollTop;var visio_offset=offset+doc_element.clientHeight;if(last_offset==visio_offset){setTimeout(initDownloadListen,200);return};last_offset=visio_offset;var visio_height=doc_element.clientHeight;var img_show_height=visio_height+offset;for(var key in map_element){if(img_show_height>key){var t_o=map_element[key];var img_vl=t_o.length;for(var l=0;l<img_vl;l++){element_obj[t_o[l]].src=element_obj[t_o[l]].getAttribute(ilattr)};delete map_element[key];download_count--}};setTimeout(initDownloadListen,200)};function getAbsoluteTop(element){if(arguments.length!=1||element==null){return null};var offsetTop=element.offsetTop;while(element=element.offsetParent){offsetTop+=element.offsetTop};return offsetTop};function init(tags){initVar(tags);initElementMap();initDownloadListen()};return{init:init}})();

在原来的js代码的最开始加了一个全局变量lljs_imgsrcattr,标明了img 自定义标签的名称,原文用的是lazy_src,现在可以这样写<img src='loading.gif' d-imgsrc='图片真实地址'>,我把lljs_imgsrcattr="d-imgsrc";这样就可以在等待图片显示的时候显示loading.gif这张图片了.

另外原文代码还有可改进的地方,就是取消使用滚动条位置来判断是否需要下载图片,因为如果 滚动条位置 一直不变,原代码会一直执行settimeout函数,我这里需求已经达到了,下次有需要再改进,有兴趣的朋友可以帮忙改进一下.思路可以如下:

采用css,或者采用new image把所有的图片"按顺序"并且"拖延"下载了,但最好加一个开关,可以令原文settimeout 方法和新方法按需使用.

最后附上原文地址:http://www.cnblogs.com/yjmyzz/archive/2010/05/13/1734850.html