javascript - 同位素项目在初始加载时重叠

Question

为该站点使用砖石布局，并在第一次加载时每个框重叠。如果您使用任何导航项目进行排序，甚至只是停留在“全部”上，它们会重新排列自己。有任何想法吗？

Answer 1

我还没有 50 的声誉，所以我无法发表评论，但我想分享一些我过去偶然发现的技巧，因为我经常使用这个插件，它可以帮助其他人。

首先，我绝对使用 Sarah 提到的 imageLoaded 函数，而不是 onload。（https://github.com/desandro/imagesloaded）

提示 1 - 为了加快 isotope 插件的工作速度（如果图像尺寸很大，或者你有很多它们，这很有用），你为每个容器加载一个占位符图像，然后在 imagesloaded 插件触发后，你可以让 isotope插件可以快速工作。然后，您可以使用包含真实 src url 的 data- 属性交换真实图像，只需使用同位素回调 ( http://isotope.metafizzy.co/events.html ) 即可。唯一需要注意的是，您的图像需要与占位符具有相同的尺寸，否则容器的大小可能会变得混乱并再次重叠。

提示 2 - 我实际上从未这样做过，但我正在考虑使用的一种方法是将图像加载为容器的背景图像，设置高度并为容器（或至少它的图像部分）设置图像作为背景尺寸：封面；然后您无需担心同位素插件开始工作之前的图像加载。