javascript - 同位素 jquery 加载缓慢...为什么？

Question

我正在创建在线作品集，我正在使用 Isotope jquery 在我的网站上呈现图像。我遇到的问题是，当您访问我的网站时，内容会加载并停留一秒钟，然后再使用 Isotope jquery 进行自组织。

我有 2 个链接的 CSS 文件(一个在本地，一个在单独的托管站点上)，最新的 Jquery(托管在 Jquery 的站点上)，然后是 Isotope 脚本(在本地托管)。这么多的引用文件是同位素脚本自组织缓慢的原因吗？如果我在本地托管所有这些，它会运行得更快吗？

Answer 1

因为在设置 Isotope 之前要等到整个页面都加载完毕，所以浏览器不仅要等待代码下载，还要等待所有元素的下载，图像、视频播放器 javascript 等等.因此，只有当一切准备就绪时，同位素才会四处移动:导致您看到的延迟。

如果所有内容的大小仅在加载后才可用，那么这可能是必要的。

提高性能。

1. 为要加载的任何内容(如图片、视频)设置明确的尺寸。

2. 将 jquery、同位素和同位素初始化脚本标记移到 HTML 正文的末尾。

3. 不要将 init 包装在文档加载处理程序中。

然后将首先加载 HTML 页面，然后随着所有图像和其他内容的加载，浏览器将按顺序加载每个脚本标签，当它加载同位素时，它将调用您的初始化脚本届时将安排一切。 Isotope 可以应对，因为它需要知道大小的所有内容都已设置大小，并且随着浏览器继续接收它正在加载的资源，它们将出现在正确的位置。

在 onLoad 处理程序中做事有一些很好的理由，但通常将您的脚本放在页面底部同样好，除非您的脚本需要来自其他外部文件(如 CSS 或图像)的任何数据).