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

标签 javascript jquery html css jquery-isotope

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

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

最佳答案

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

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

提高性能。

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

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

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

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

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

关于javascript - 同位素 jquery 加载缓慢...为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20057395/

相关文章:

JavaScript,访问json属性

javascript - 网站从浏览器到平板电脑都是响应式的,但在移动设备上没有响应式。我该如何纠正这个问题?

javascript - 无法获取/设置应在范围内的变量

javascript - 你可以使用 for 循环递减条件吗

javascript - 定位已创建元素内的元素,纯 JS

javascript - 如何在 Flot 中填充折线图而不将 y 轴强制为零?

javascript - ng-options 过滤器不起作用?

javascript - 检查 Javascript 数组中是否存在标签

javascript - 为什么我的导航栏在 IE 和 Edge 中位于屏幕顶部,但在 Chrome 中看起来不错?

android - iOS 和 Android 中的视频播放功能