我正在创建在线作品集,我正在使用 Isotope jquery 在我的网站上呈现图像。我遇到的问题是,当您访问我的网站时,内容会加载并停留一秒钟,然后再使用 Isotope jquery 进行自组织。
我有 2 个链接的 CSS 文件(一个在本地,一个在单独的托管站点上),最新的 Jquery(托管在 Jquery 的站点上),然后是 Isotope 脚本(在本地托管)。这么多的引用文件是同位素脚本自组织缓慢的原因吗?如果我在本地托管所有这些,它会运行得更快吗?
最佳答案
因为在设置 Isotope 之前要等到整个页面都加载完毕,所以浏览器不仅要等待代码下载,还要等待所有元素的下载,图像、视频播放器 javascript 等等.因此,只有当一切准备就绪时,同位素才会四处移动:导致您看到的延迟。
如果所有内容的大小仅在加载后才可用,那么这可能是必要的。
提高性能。
为要加载的任何内容(如图片、视频)设置明确的尺寸。
将 jquery、同位素和同位素初始化脚本标记移到 HTML 正文的末尾。
不要将 init 包装在文档加载处理程序中。
然后将首先加载 HTML 页面,然后随着所有图像和其他内容的加载,浏览器将按顺序加载每个脚本标签,当它加载同位素时,它将调用您的初始化脚本届时将安排一切。 Isotope 可以应对,因为它需要知道大小的所有内容都已设置大小,并且随着浏览器继续接收它正在加载的资源,它们将出现在正确的位置。
在 onLoad 处理程序中做事有一些很好的理由,但通常将您的脚本放在页面底部同样好,除非您的脚本需要来自其他外部文件(如 CSS 或图像)的任何数据).
关于javascript - 同位素 jquery 加载缓慢...为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20057395/