如何在 dart 中为网页制作预加载器答案

【问题标题】：How to make a preloader for webpage in dart如何在 dart 中为网页制作预加载器
【发布时间】：2013-03-29 17:18:19
【问题描述】：

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

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

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

【问题讨论】：

为什么大家都把Dart这个名字写成大写？

标签： html css dart dart-webui

【解决方案1】：

在你的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;
}

它会起作用的......

【讨论】：

感谢您的回答，但这是 jquery 而不是飞镖。我稍后会发布我的解决方案

【解决方案2】：

这是一个纯 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>

【讨论】：