×

网站第一次加载loading实现方法

作者:流泪的石头2018.09.12来源:Web前端之家浏览:21261评论:0
关键词:loading

网站第一次加载loading实现方法。

  1. function loading() {
  2.         var totalImg = $("body img").length;
  3.         var i = 1;
  4.         function imgLoaded() {
  5.             i += 1;
  6.             if(i>totalImg){
  7. //              console.log(totalImg);
  8. //              console.log($("#img1").width());
  9.                 $(".loader .loading-icon").remove();
  10.                 $(".loader").animate({
  11. //                  opacity: 0,
  12.                     height: 0
  13.                 },2000,'easeInOutExpo');
  14.             }
  15.         }
  16.         $.each($("body img"), function () {
  17.             var image = new Image();
  18.             image.src = $(this).attr('src');
  19.             //console.log(image.complete);
  20.             if (image.complete) {
  21.                 imgLoaded();
  22.             } else {
  23.                 image.onload = imgLoaded
  24.             }
  25.         });
  26.     }
  27.     $(document).ready(function () {
  28.         loading();
  29.     });

HTML:

  1. <div class="loader">
  2.     <div class="loading-icon">
  3.     </div>
  4. </div>

自己去试试吧。

您的支持是我们创作的动力!
温馨提示:本文作者系流泪的石头 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/loading230492349234.html

网友评论文明上网理性发言 已有0人参与

发表评论: