Question

我正尝试使用http://yanshi.sucaihuo.com/jquery/17/1725/demo/

中的“网格加载动画”

我的网格不是用jQuery构建的，但是我仅使用CSS。我很乐意为我的网格使用这些动画之一。在演示中，动画仅在您单击效果时播放。

我需要的是使用这些动画之一（最好是“ Shu”）立即加载图像。我无法在演示站点或github上找到有关如何实现此目的的示例。动画是否还可能滚动加载？我在我的网站上使用scrollreveal.js。

我们将不胜感激

/* ---- grid ---- */

img.grid__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(280px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-item {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #929796;
  background-color: #333;
  border-radius: 5px;
  &:nth-child(odd) {
    background-color: #424242;
  }
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 2;
}

.span-4 {
  grid-column-end: span 2;
  grid-row-end: span 1;
}

.span-5 {
  grid-column-end: span 1;
  grid-row-end: span 2;
}

.grid--hidden {
  position: fixed !important;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}

.js .grid--loading::before,
.js .grid--loading::after {
  content: '';
  z-index: 1000;
}

.js .grid--loading::before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #2c2d31;
}

.js .grid--loading::after {
  position: absolute;
  top: calc(25vh - 20px);
  left: 50%;
  width: 40px;
  height: 40px;
  margin: 0 0 0 -20px;
  border: 8px solid #383a41;
  border-bottom-color: #565963;
  border-radius: 50%;
  animation: animLoader 0.8s linear forwards infinite;
}

<html lang="en" class="no-js">

<head>
  <script>
    document.documentElement.className = 'js';
  </script>
</head>

<body class="">
  <div class="grid grid-layout">
    <div class="grid-item span-5 grid-item-1"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
    <div class="grid-item grid-item-2"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
    <div class="grid-item span-4 grid-item-3"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
    <div class="grid-item grid-item-4"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
    <div class="grid-item span-2 grid-item-5"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
    <div class="grid-item grid-item-6"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
    <div class="grid-item grid-item-7"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
  </div>
  <script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/imagesloaded.pkgd.min.js"></script>
  <script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/masonry.pkgd.min.js"></script>
  <script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/anime.min.js"></script>
  <script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/main.js"></script>
</body>

</html>

Answer 1

您可以在没有js的情况下实现这一目标。简单的CSS解决方案是将加载的gif图像添加到 “ .grid-item {}”作为背景图片。这样，加载程序将一直可见，直到图像加载完成为止。

如何为我的CSS网格使用网格加载动画脚本（GridLoaderFx）

1 个答案: