我似乎无法让预加载器(查询加载器2)先加载页面上的其他所有内容。
当我刷新页面时,全屏滑块显示中的图像会阻止页面向下,然后查询加载器启动。
有没有一种方法可以在页面上的其他所有内容之前启动预加载器?
我经常使用堆栈溢出,通常会找到问题的答案,但是由于我对javascript的了解有限,这使我感到困惑。我尝试过的事情:
将对queryloader2的调用放在标题的页面顶部。
将调用放在页面底部的滑块脚本上,以便它们在预加载器之后加载。
将预加载器的z索引更改为高于滑块。
jQuery.getScript()按顺序加载了脚本,但是仍然显示滑块,阻止了页面,然后启动了预加载器。
我在想这与加载顺序有关,但是如果您对我在做什么错有任何想法,在此感谢您的帮助。
我已经链接到我的站点,因为我不知道要在此处放置哪段代码,因此您可以看到预加载器和滑块以错误的方式加载http://stavriaphotography.com的方式
最佳答案
该站点非常重视外部脚本。这是在浏览器中加载资源的工作方式:
图片是异步加载的,这意味着浏览器在继续深入DOM之前不会等待图片加载,但是
JavaScript是同步加载的,您不能在前一个加载之前加载下一个。
jQuery $(document).ready()
函数仅在完全加载DOM时触发。
这是您网站上发生的事情:
您将jQ和queryLoader加载到头部,并准备在DOM准备好时调用它。页脚中的脚本需要花费一些时间来加载,并且正在延迟$(document).ready()
函数调用。同时,您的身体中有图像,并且由于图像是异步加载的,因此在queryLoader准备执行之前,浏览器开始加载图像。
在您的情况下,最简单的解决方案是将所有外部脚本都移到html标头中,但这不是一个非常实用的解决方案。
我建议您阅读一些JavaScript知识,然后将您的网站分成多个文件,以加快加载速度。
一些指针:jQuery.ajax()和Handlebars.js,或者如果您真的想疯狂地使用RequireJS进入Backbone.js进行异步javascript加载。
希望这可以帮助!