延迟加载和砌体答案

【问题标题】：Lazyload and Masonry延迟加载和砌体
【发布时间】：2020-07-26 16:36:37
【问题描述】：

我正在尝试让这种布局按照我想要的方式用于 WordPress 博客。我不明白为什么 Lazyload 会导致整个砌体重叠并加载在同一个位置而不是网格中。当我删除 Lazyload 时，布局与覆盖悬停一起用作砖石网格。

第二个问题是这段代码：

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
}

我不知道为什么我不能删除底部未使用的支架。当我移除它时，整个砖石都不起作用，它变成了一个完全破碎的烂摊子。

谁能解答这两个问题？谢谢！

此外，如果您调整窗口大小或将移动设备左右翻转，砌体网格显示良好。

更新：所以我发现 8 月发布的 WordPress 5.5 包含 LazyLoad！届时将再次重新实现 LazyLoad。

【问题讨论】：

【解决方案1】：

对于您的延迟加载和 mansory 问题，“伪造”或“模拟”调整窗口大小可能是一种可能的解决方案。调整大小后网格可以正常工作，因此可以作为触发该事件以使您的代码正常工作的一种方式。

你可以使用纯 javascript，在 wordpress 中你可以使用更短的 jQuery 版本：

使用纯 Javascript：

var simulateResize = new Event('resize');
window.dispatchEvent(simulateResize );

使用 jQuery：

$(window).trigger('resize');

确保将代码放在页面底部，尤其是在生成网格元素和内容的代码之后。

对于您的 CSS 问题，使用 @keyframes 规则的正确方法是：

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

所以你的代码是正确的，最后一个} 是不必要的。如果删除它会导致您的代码崩溃，那么您的 .fade 代码可能会有一些 @media 规则，例如：

@media only screen and (max-width: 600px) {}

如果打开但不关闭会导致问题。

【讨论】：