我正在尝试使用http://yanshi.sucaihuo.com/jquery/17/1725/demo/的'grid loading animations'
我的网格不是用jQuery构建的，但我只使用了CSS。我很乐意为我的网格使用其中一个动画。在演示中，动画仅在您单击效果时播放。
我需要的是在使用这些动画之一（最好是'Shu'）的同时立即加载图像。我无法在演示站点或github上找到如何实现此目的的示例。滚动动画是否也可能加载？我在我的网站上使用scrollreveal.js。
帮助将非常感激
https://codepen.io/Jaxxie/pen/pKKjPG
/* ---- 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>没有js你可以做到这一点。简单的css解决方案是将加载gif图像添加到“.grid-item {}”作为背景图像。因此，在图像加载完成之前，加载器将可见。