JS erkennt, dass der Funktionscode zum Vorladen von Bildern nicht in der richtigen Reihenfolge ist-js-Tutorial-php.cn

JS erkennt, dass der Funktionscode zum Vorladen von Bildern nicht in der richtigen Reihenfolge ist

零下一度

Freigeben： 2017-05-13 11:00:50

Original

1270 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Code der ungeordneten Vorladefunktion von JS vor, um das Bildvorladen zu implementieren. Er ist sehr gut und hat Referenzwert

Das Rendern des Bildvorladens und des ungeordneten Vorladens ist wie unten gezeigt. Wenn Sie damit einverstanden sind, lesen Sie bitte den Implementierungscode.

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

[Verwandte Empfehlungen]

1 🎜 >Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen2.

Kostenloses JS-Online-Video-Tutorial

php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonJS erkennt, dass der Funktionscode zum Vorladen von Bildern nicht in der richtigen Reihenfolge ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!