2

我有一个使用 HTML、CSS3 和 Dart 构建的网站。现在，我将如何制作一个预加载器，它会在页面的所有内容加载之前运行？

我什至在考虑使用这样的东西：http ://cssload.net/ 所以我愿意接受任何建议......

更新：类似这样的东西，但在 Dart 中：http: //gayadesign.com/scripts/queryLoader2/ http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/

4

2 回答 2

0

在你的 html 页面的 body 标签之后添加一个这样的 html 代码。选择你喜欢的任何图像。

<div id="preloader">
   <img id="spinner" src="http://cssload.net/preloaders/circular.gif" alt="" />
</div>

使用这个 jquery 代码...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
/* the preloader division is visible until the whole page loades and then fades out using this code */
$(window).load(function() {
   $('#preloader').fadeOut(300, function() {
      $(this).remove();
   });
}); 
</script>

然后添加这个css代码

#preloader,#spinner {  
     position:fixed;  
     top:0; left:0; right:0; bottom:0; margin:auto; 
     background:#fff;  
     z-index:9999;  
     overflow:hidden;
}

它会工作......

于 2013-05-08T09:34:35.920 回答
0

这是一个纯 svg 解决方案，也可定制

body {
  font-family: "Courier New", Courier, monospace;
  background-color: #333333;
  margin: 0px;
  padding: 0px;
  color: #e8e8e8;
}
a{
   color: #e8e8e8;
}
.path {
  stroke-dasharray: 310;
  stroke-dashoffset: 280;
  animation: dash 2s linear  infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
 
  25% {
    stroke-dashoffset: 15;
  }
  100% {
    stroke-dashoffset: 280;
  }
}

.loader {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
<div style=" display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100vh;">
<svg class='loader'
   width="120"
   height="120">
   <circle
    class="progress-ring__circle"
    stroke="#D9DDE4"
    stroke-width="10"
    stroke-linecap="round"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
  <circle
    class="path" 
    stroke="#1a73e8"
    stroke-width="10"
    stroke-linecap="round"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
 
</svg>
  
  <a href="https://codesandbox.io/s/ring-preloader-ui-opeso" target="_blank">[Customize your own ring preloader]</a>
  </div>

于 2020-04-01T05:10:20.103 回答