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

Question

我正在创建在线投资组合，我正在使用Isotope jquery在我的网站上展示图片。我遇到的问题是，当你进入我的网站时，内容加载并在使用同位素jquery自组织之前停留一秒钟。

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

Answer 1

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

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

提高表现。

1. 为要加载的任何内容（如图片，视频）添加明确的尺寸。

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

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

然后会发生什么是首先加载HTML页面，然后当所有图像和其他东西都加载时，浏览器将按顺序加载每个脚本标签，当它加载同位素时，它将调用你的init脚本这将安排一切。 Isotope将应对，因为它需要知道其大小设置的所有内容，并且当浏览器继续接收它正在加载的资源时，它们将出现在正确的位置。

在onLoad处理程序中执行操作有一些很好的理由，但通常将脚本放在页面底部也同样好，除非您的脚本需要来自其他外部文件（如CSS或图像）的任何数据）。