纯JS图片批量预加载技术代码

<!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> 
<body> 
<div id="status" ></div> 
<div id="processing"></div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20%24id(id)%7B%20return%20document.getElementById(id)%3B%7D%20%0D%0Afunction%20%24c(tagName)%7B%20return%20document.createElement(tagName)%3B%7D%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0AimageLoad(%20%7B%20%0D%0Aurl%3Afunction(v)%7B%20%0D%0Av%20%3D%20%5B%5D%3B%20%0D%0Afor(var%20i%3D1%3B%20i%3C%3D8%3B%20i%2B%2B)%7B%20%0D%0Av%5Bv.length%5D%20%3D%20'http%3A%2F%2Ffiles.glzy8.com%2Fdemoimg%2F200911%2Fwall_s'%2Bi%2B'.jpg%3F_%3D'%2B(new%20Date).getTime()%3B%20%0D%0A%7D%20%0D%0Areturn%20v%3B%20%0D%0A%7D%2C%20%0D%0Aoncomplete%3A%20function(s)%7B%20%0D%0A%24id('status').innerHTML%20%3D%20'%E6%AD%A3%E5%9C%A8%E5%8A%A0%E8%BD%BD...'%2Bs.complete%2B'%2F'%2Bs.total%3B%20%0D%0A%24id('processing').innerHTML%20%3D%20this.src%3B%20%0D%0A%7D%2C%20%0D%0Acomplete%3Afunction(imgs%2C%20s)%7B%20%0D%0Avar%20%24r%20%3D%20%24c('div')%3B%20%0D%0A%24r.id%20%3D%20'result'%3B%20%0D%0A%24r.innerHTML%20%3D%20'%E8%AE%A1%E5%88%92%E5%8A%A0%E8%BD%BD%3A'%2Bs.total%2B'%2C%20%E5%8A%A0%E8%BD%BD%E6%88%90%E5%8A%9F%3A'%2Bs.load%2B'%E9%94%99%E8%AF%AF%3A'%2Bs.error%3B%20%0D%0Adocument.body.appendChild(%24r)%3B%20%0D%0Afor(var%20i%3D0%2C%20l%3Dimgs.length%2C%20%24m%3B%20i%3Cl%3B%20i%2B%2B)%7B%20%0D%0A%24m%20%3D%20%24c('div')%3B%20%0D%0A%24m.innerHTML%20%3D%20(imgs%5Bi%5D.loaded%3F'%E5%8A%A0%E8%BD%BD%E6%88%90%E5%8A%9F%3A'%3A'%E5%8A%A0%E8%BD%BD%E5%A4%B1%E8%B4%A5%3A')%2B%20imgs%5Bi%5D.src%3B%20%0D%0Adocument.body.appendChild(%24m)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%7D%3B%20%0D%0Afunction%20imageLoad(%20s%20)%7B%20%0D%0A%20%20%20%20var%20urlset%20%3D%20%5B%5D%2C%20undefined%2C%20toString%20%3D%20Object.prototype.toString%3B%20%0D%0A%20%20%20%20switch(%20toString.apply(s.url)%20)%7B%20%0D%0A%20%20%20%20%20%20%20%20case%20'%5Bobject%20String%5D'%3A%20urlset%5Burlset.length%5D%20%3D%20s.url%3B%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%20'%5Bobject%20Array%5D'%3A%20if(!s.url.length)%7B%20return%20false%3B%20%7D%20urlset%20%3D%20s.url%3B%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%20'%5Bobject%20Function%5D'%3A%20s.url%20%3D%20s.url()%3B%20return%20imageLoad(%20s%20)%3B%20%0D%0A%20%20%20%20%20%20%20%20default%3A%20return%20false%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20var%20imgset%20%3D%5B%5D%2C%20r%20%3D%7B%20total%3Aurlset.length%2C%20load%3A0%2C%20error%3A0%2C%20abort%3A0%2C%20complete%3A0%2C%20currentIndex%3A0%20%7D%2C%20timer%2C%20%0D%0A%20%20%20%20%20%20%20%20_defaults%20%3D%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20url%3A''%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20onload%3A%20'function'%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20onerror%3A%20'function'%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20oncomplete%3A%20'function'%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20ready%3A%20'function'%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20complete%3A%20'function'%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20timeout%3A%2015%20%0D%0A%20%20%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20for(%20var%20v%20in%20_defaults)%7B%20%0D%0A%20%20%20%20%20%20%20%20s%5Bv%5D%20%3D%20s%5Bv%5D%3D%3D%3Dundefined%3F%20_defaults%5Bv%5D%3A%20s%5Bv%5D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20s.timeout%20%3D%20parseInt(%20s.timeout%20)%20%7C%7C%20_defaults.timeout%3B%20%0D%0A%20%20%20%20timer%20%3D%20setTimeout(%20_callback%2C%20s.timeout*1000)%3B%20%0D%0A%20%20%20%20for(%20var%20i%3D0%2Cl%3Durlset.length%2Cimg%3B%20i%3Cl%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20img%20%20%20%20%20%20%20%20%20%3D%20new%20Image()%3B%20%0D%0A%20%20%20%20%20%20%20%20img.loaded%20%20%20%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20imgset%5Bimgset.length%5D%20%3D%20img%3B%20%0D%0A%20%20%20%20%7D%20%20%20%20for(%20i%3D0%2Cl%3Dimgset.length%3B%20i%3Cl%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20imgset%5Bi%5D.onload%20%20%20%20%20%3D%20function()%7B%20_imageHandle.call(this%2C%20'load'%2C%20i%20)%3B%20%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20imgset%5Bi%5D.onerror%20%20%20%20%20%3D%20function()%7B%20_imageHandle.call(this%2C%20'error'%2C%20i%20)%3B%20%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20imgset%5Bi%5D.onabort%20%20%20%20%20%3D%20function()%7B%20_imageHandle.call(this%2C%20'abort'%2C%20i%20)%3B%20%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20imgset%5Bi%5D.src%20%20%20%20%20%20%20%20%20%3D%20''%2Burlset%5Bi%5D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(%20_isFn(s.ready)%20)%7B%20s.ready.call(%7B%7D%2C%20imgset%2C%20r)%3B%20%7D%20%20%20%20%20%0D%0A%20%20%20%20function%20_imageHandle(%20handle%2C%20index%20)%7B%20%0D%0A%20%20%20%20%20%20%20%20r.currentIndex%20%3D%20index%3B%20%0D%0A%20%20%20%20%20%20%20%20switch(%20handle%20)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'load'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.onload%20%3D%20null%3B%20this.loaded%20%3D%20true%3B%20r.load%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%20_isFn(s.onload)%20)%7B%20s.onload.call(this%2C%20r)%3B%20%7D%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3Bcase%20'error'%3A%20r.error%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%20_isFn(s.onerror)%20)%7B%20s.onerror.call(this%2C%20r)%3B%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'abort'%3A%20r.abort%2B%2B%3B%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20r.complete%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20oncomplete%20%E4%BA%8B%E4%BB%B6%E5%9B%9E%E8%B0%83%20%0D%0A%20%20%20%20%20%20%20%20if(%20_isFn(s.oncomplete)%20)%7B%20s.oncomplete.call(this%2C%20r)%3B%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%A4%E6%96%AD%E5%85%A8%E5%B1%80%E5%8A%A0%E8%BD%BD%20%0D%0A%20%20%20%20%20%20%20%20if(%20r.complete%3D%3D%3Dimgset.length%20)%7B%20_callback()%3B%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20_callback()%7B%20%0D%0A%20%20%20%20%20%20%20%20clearTimeout(%20timer%20)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(%20_isFn(s.complete)%20)%7B%20s.complete.call(%7B%7D%2C%20imgset%2C%20r)%3B%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20_isFn(fn)%7B%20return%20toString.apply(fn)%3D%3D%3D'%5Bobject%20Function%5D'%3B%20%7D%20%0D%0A%20%20%20%20return%20true%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程