Question

如何编写页面上的图像加载时显示的加载图标或图形。一个例子是http://landerapp.com/？

我的目标是阻止用户在屏幕上看到此图像，直到他们准备好制作动画（请参阅http://tsawebmaster1.hhstsa.com/index.html处的问题）。

Answer 1

让我们以可见的加载图像开始，该图像固定在屏幕的正中间。然后，当页面完全加载后，我们会在"page_loaded"上添加<body>类：

[1]开始淡出加载图像

[2]开始将屏幕外图像淡入和转换到屏幕

＆＃13;

window.onload = function() {
  document.body.classList.add("page_loaded");
}

＆＃13;

.loader {     
  opacity: 1;
  transition: 2s opacity;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.right,
.left {
  height: 100px;
  position: absolute;
  transition: 1s 2s;
  opacity: 0;
}

.left {
  left: 0;
  transform: translateX(-50em);  
}

.right {
  right: 0;
  transform: translateX(50em);  
}

.page_loaded .loader {
  opacity: 0;
}

.page_loaded .right,
.page_loaded .left {
  opacity: 1;
  transform: translateX(0);
}

＆＃13;

<img class="loader" src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt="" />

<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" class="right" />

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTS704tVMgbKCry10AhT09VE8wBY5S9v-PWxTBOa7o52JU0TsjH" alt="" class="left" />

＆＃13;

Answer 2

如果您使用的是jQuery或$(function(){ $('.img-container img').imagesLoaded().done(function(){ console.log('images loaded'); $('.img-container .loader').remove(); $('.img-container img.hide').removeClass('hide'); }).fail(function(){ console.log('FAILED TO LOAD IMAGES'); }); });，我建议您使用imagesLoaded，以达到您想要的效果。

我选择这样的事情：

＆＃13;

.img-responsive {
    max-width : 100%;  
  }
  
  .hide {
    display : none;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<div class="img-container">
  <div class="loader">
    Loading image....  
  </div>
  <img src="http://mascotafiel.com/wp-content/uploads/2015/10/perros-Husky-Siberiano_opt-compressor-1.jpg" alt="PrettyCoolImage" class="img-responsive hide">
</div>

＆＃13;

{{1}}

＆＃13;

图像加载时加载图标

2 个答案: