cari

Rumah  >  Artikel  >  hujung hadapan web  >  JS实现图片无序预加载功能代码

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

零下一度
零下一度asal
2017-05-13 11:00:501313semak imbas

这篇文章主要介绍了JS实现图片预加载之无序预加载功能代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

具体代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>PreLoading</title>
  <style>
    *{margin:0; padding:0; border:none; outline:0; text-decoration:none;}
    html,body,.box{width:100%; height:100%;}
    .box{display:none;}
    #img{width:90%; height:90%; margin:2vh auto 0; display:block; box-shadow:0 0 10px gray;}
    .box .btns{width:140px; height:40px; display:block; margin:20px auto;}
    .box .btns .btn{width:60px; height:40px; display:block; border:1px gray solid; background-color:#ccc; text-align:center; line-height:40px; float:left;}
    .box .btns .btn:nth-of-type(2){margin-left:16px;}
    .load{width:100%; height:100%; display:block; font-size:60px; font-family:"微软雅黑"; color:#ccc; text-align:center; line-height:100vh; position:fixed;}
  </style>
</head>
<body>
  <p class="box">
    <img id="img" src="" alt="pic">
    <p class="btns"><a href="javascript:" rel="external nofollow" rel="external nofollow" class="btn">prev</a><a href="javascript:" rel="external nofollow" rel="external nofollow" class="btn">next</a></p>
  </p>
  <p class="load">0%</p>
  <script type="text/javascript">
    var imgs = [&#39;http://down.699pic.com/photo/50036/7661.jpg?_upt=da51378d1494571758&_upd=500367661.jpg&#39;,
          &#39;http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/09/0F/ChMkJljskIqIPX9bAAMPyuIn8DcAAbj8QB7XpYAAw_i343.jpg&#39;,
          &#39;http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/09/0F/ChMkJljskLeIaW-JAAIudN_yqvgAAbj8gDQO5AAAi6M64.jpeg&#39;,
          &#39;http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/08/ChMkJlauzISIH0uXAARUHuJLVX8AAH8-gHu6zsABFQ2166.jpg&#39;,
          &#39;http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/08/ChMkJlauzISIIL5TAAObxg4-XeUAAH8-gHzP3EAA5ve000.jpg&#39;];
    // 绑定按钮事件
    var btns = document.getElementsByClassName(&#39;btn&#39;),
      img = document.getElementById(&#39;img&#39;),
      index = 0;
    for(var i=0;i<btns.length;i++){
      btns[i].onclick = function(){
        if(this.innerHTML === &#39;next&#39;){
          index = Math.min(++index , imgs.length-1);
          img.setAttribute(&#39;src&#39;,imgs[index]);
        }
        if(this.innerHTML === &#39;prev&#39;){
          index = Math.max(--index , 0);
          img.setAttribute(&#39;src&#39;,imgs[index]);
        }
      }
    }
    // 计数变量
    var count = 0,
      load = document.getElementsByClassName(&#39;load&#39;)[0],
      box = document.getElementsByClassName(&#39;box&#39;)[0];
    // 无序预加载
    for(var i=0;i<imgs.length;i++){
      (function(i){
        var imgObj = new Image();
      imgObj.onload = function(){
          load.innerHTML = Math.round((count + 1) / imgs.length * 100) + &#39;%&#39;;
          count++;
          if(count >= imgs.length-1){
            load.style.display = &#39;none&#39;;
            box.style.display = &#39;block&#39;;
            img.setAttribute(&#39;src&#39;,imgs[0]);
            document.title = &#39;1/&#39; + imgs.length;
          }
        }
      imgObj.onerror = function(){
          load.innerHTML = Math.round((count + 1) / imgs.length * 100) + &#39;%&#39;;
          count++;
          if(count >= imgs.length-1){
            load.style.display = &#39;none&#39;;
            box.style.display = &#39;block&#39;;
            img.setAttribute(&#39;src&#39;,imgs[0]);
            document.title = &#39;1/&#39; + imgs.length;
          }
        }
        imgObj.src = imgs[i];
      })(i);
    }
  </script>
</body>
</html>

 【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费js在线视频教程

3. php.cn独孤九贱（3）－JavaScript视频教程

Atas ialah kandungan terperinci JS实现图片无序预加载功能代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js各种继承方式和优缺点的介绍Artikel seterusnya：关于JavaScript继承的多种方式以及优缺点的详细介绍

Artikel berkaitan

Lihat lagi