我正在尝试使用 http://yanshi.sucaihuo.com/jquery/17/1725/demo/ 中的“网格加载动画”
我的网格不是用 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{}”作为背景图像。因此加载程序将一直可见，直到图像加载完成。
关于jquery - 如何为我的 CSS 网格使用网格加载动画脚本 (GridLoaderFx)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50996299/