资源图片的预加载进度条

使用createJs或者preloadJs制作真实的加载进度

<div id="loading">
    <div class="loading-show">
        <div class="logo">
            <img src="images/1.jpg">
        </div>
        <div class="load">
            <i></i>
            <div id="loadgrowing"><cite></cite></div>
            <p>加载中....</p>
        </div>
    </div>
</div>
<script src="http://vip.qdxin.cn/navmenu/js/jxinq111.js"></script>
<script src="preloadjs.min.js"></script>

<script>
  // 如果不同域名会提示跨域
    var manifest = [
        'images/1.jpg',
        'images/2.jpg',
        'images/3.jpg',
        'images/4.png',
        'images/5.jpg',
        'images/6.png',
        'images/7.jpeg',
        'images/8.jpg',
        'images/10.jpg'
    ];
        
    var queue = new createjs.LoadQueue(true);
    queue.on("progress", handleFileLoad);//加载进度 
    queue.on("complete", handleComplete);//加载完成
    queue.loadManifest(manifest);//加载的列表
    function handleFileLoad(e){
        var bnum=parseInt(queue.progress*100);
        $("#loading i").html(bnum+"%");
        $("#loading cite").width(bnum+'%');
    }
    function handleComplete(){ // 加载完成执行
         $("#loading").fadeOut('slow');
    }
</script>

注意：使用preload.js插件，图片数组不能使用如http://www.xxx.com/不是同域名下的图片资源，否则会提示跨域报错。如下图：

这种方法制作的加载进度是真实的加载进度，会根据图片大小等信息自动加载。实现进度条的效果。

案例效果：使用preload.js加载图片等资源

使用原生JS制作加载进度效果

原生JS制作加载进度效果，主要用到promise和img的onload事件。这个方法的好处是可以加载不是本域下的任何图片。对图片来源没有限制，而且可以更改每次加载的延迟时间。

// 加载的工具类
const sleep = (timeout = 1000)=>new Promise((resolve)=>{
  setTimeout(resolve, timeout);
});

var LoadImg = (function() {
  var Load = function(urls, progressId) {
    this.urls = urls;
    this.bar = document.getElementById(progressId);
    this.progress = this.bar.getElementsByTagName('cite')[0];
    this.progressPercent = this.bar.nextElementSibling;
    this.imgNumbers = urls.length;
    this.loadImgNumbers = 0;
    // console.log(this.progressPercent)
    this.init();
  };

  Load.prototype = {
    load: function(self, src) {
      var obj = new Image();
      obj.src = src;
      obj.onload = () => {
        self.loadImgNumbers++;
        var percent = parseInt((self.loadImgNumbers / self.imgNumbers) * 100) + '%';
        self.progress.style.width = percent;
        self.progressPercent.innerHTML = percent;
        // 加载完成触发自定义事件
        if (self.loadImgNumbers === self.imgNumbers) {
          let loadOver = new CustomEvent('loadover', {
            // 自定义事件携带的参数
            detail : {
              title: 'load ok'
            }
          });
          // 随后在对应的元素上显示的触发该事件
          if(window.dispatchEvent) {
            window.dispatchEvent(loadOver);
          } else {
            window.fireEvent(loadOver);
          }
        }
      };
    },
    init: function() {
      var self = this;

      let timer = async(timeout) => {
        for(let i = 0; i < timeout; i++) {
          // 暂停循环，每次间隔一秒
          // await sleep(100);
          await sleep(200);
          console.log(i + 1);
          self.load(self, self.urls[i]);
        }
      };

      timer(this.imgNumbers);
    }
  };

  return Load;
})();

<section class="loading">
    <div class="load">
        <p class="load-tips">
          加载中 请稍后
        </p>
        <div id="load-growing" class="load-growing"><cite></cite></div>
        <p class="load-num">0%</p>
    </div>
</section>
    
<script src="loadimg.js"></script>
<script>
  // 可以加载不同域名的图片
  let images = [
      'http://statics.qdxin.cn/uploadfile/2021/0530/20210530053421583.jpg',
      'http://statics.qdxin.cn/uploadfile/2021/0530/20210530053333560.jpg',
      'http://statics.qdxin.cn/uploadfile/2021/0527/20210527015240913.jpg',
      'http://statics.qdxin.cn/uploadfile/2021/0529/20210529085922512.png',
      'http://statics.qdxin.cn/uploadfile/2021/0531/20210531094836662.jpg',
      'http://statics.qdxin.cn/uploadfile/2021/0529/20210529082353497.png',
      'http://statics.qdxin.cn/uploadfile/2021/0528/20210528110707819.jpeg',
      'http://statics.qdxin.cn/uploadfile/2021/0531/20210531084815334.jpg',
      'http://statics.qdxin.cn/uploadfile/2021/0528/20210528093944778.jpg'
  ];
  let isLoaded = false;
  if (images.length > 0) {
      setTimeout(() => {
        new LoadImg(images, 'load-growing');
      }, 20);
  }
  // 监听类中派发的loadover事件 
  window.addEventListener('loadover', () => {
      isLoaded = true;
      alert('加载完成');
  });
</script>

缺点是只有兼容ES6+的浏览器才支持，不过这种进度条，一般都是应用在手机版的网页上，所以以上两种方法都可以基本满足需求，大家根据具体应用情况酌情使用即可。

每一张图片加载后延迟多久再加载下一张，更改await sleep(200); 函数中的数值即可。

案例效果：使用原生JS模拟加载效果

全部案例效果点击查看

相关资料