Home > Article > Web Front-end > JS realizes the image preloading function code out of order

JS realizes the image preloading function code out of order

零下一度Original: 2017-05-13 11:00:501322browse

This article mainly introduces the code of the disordered preloading function of JSimplementationpictures, which is very good and has reference value. Friends who need it can refer to it

The rendering of image preloading and disordered preloading is as shown below. If you feel good about it, please refer to the implementation code.

The specific code is as follows:

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

[Related recommendations]

1. Special Recommended : "php Programmer Toolbox" V0.1 version download

2. Free js online video tutorial

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of JS realizes the image preloading function code out of order. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to various inheritance methods and advantages and disadvantages of jsNext article：Introduction to various inheritance methods and advantages and disadvantages of js

See more

JS realizes the image preloading function code out of order

Related articles