JS实现图片预加载之无序预加载功能代码

图片预加载之无序预加载的效果图如下所示，如果大家感觉不错，请参考实现代码。

具体代码如下所示：

！DOCTYPE html html lang=' zh-CN ' head meta charset=' UTF-8 ' title preloading/title style * { margin :0；划水：0;border : none outlines :0文本装饰：无；} html，正文，方框{宽度：100%；高度：100%;} .box { display : none } # img { width :90%；高度：90%;余量：2vh自动0;显示：块；box-shadow:0 0 10px灰色；} .盒子btns { width:140px高度：40 px显示：块；余量：20px汽车；} .盒子BTN .btn { width:60px高度：40 px显示：块；border:1px灰色固体；背景色： # CCC文本对齐：居中；线高：40 pxfloat:left}。盒子btns .btn:nth第(2)种类型{左边距：16 px} .负载{宽度：100%；高度：100%;显示：块；font-size :60 px字体系列： '微软雅黑；color: # ccc文本对齐：居中；线高：100 VH位置：固定；}/style/head body div class=' box ' img id=' img ' src=' http : ' alt=' pic ' p class=' btns ' a href=' JavaScript : ' rel='外部不跟随' rel='外部不跟随' BTN ' next/a/p/div p class=' BTN ' prev/aa href=' JavaScript : ' rel='外部不跟随' rel='外部不跟随' class=' 'http://desk.fd.zol-img.com。cn/t _ s 1920 x 1080 C5/G5/M00/09/0F/chmkjljskipx9 baampyuin8 dcaabj8 QB 7 xpyaaw _ i343。jpg '，' 3358办公桌。FD。佐尔-img。com .//绑定按钮事件var btns=文档。getelementsbyclassname(' BTN ')，img=document。getelementbyid(' img ')，索引=0；for(var I=0；ibt ns。长度；i ){ btns[i].onclick=function(){ if(this。innerhtml===' next '){ index=math。最小值(指数，imgs。长度-1)；img.setAttribute('src '，img[index])；}如果(这个。innerhtml===' prev '){ index=math。max(-index，0)；img.setAttribute('src '，img[index])；} } } //计数变量var计数=0，load=document。getelementsbyclass名称(' load ')[0]，box=document。getelementsbyclass名称(' box ')[0]；//无序预加载for(var I=0；iimgs . lentigi){(函数(I){ var imgObj=new Image()；imgobj。onload=function(){ load。innerhtml=数学。round((count 1)/img。长度* 100)' % '；计数；if(count=img。长度-1){负载。风格。显示='无'；盒子。风格。display=' blockimg.setAttribute('src '，img[0])；文件。title=' 1/' imgs。长度；} } imgobj。onerror=function(){ load。innerhtml=数学。round((count 1)/img。长度* 100)' % '；计数；if(count=img。长度-1){负载。风格。显示='无'；盒子。风格。display=' blockimg.setAttribute('src '，img[0])；文件。title=' 1/' imgs。长度；} } imgobj。src=imgs[I]；})(一)；}/脚本/正文/html以上所述是小编给大家介绍的射流研究…实现图片预加载之无序预加载功能代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！