在加载所有脚本文件后触发 Javascript 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22361850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript event to fire after all script files have been loaded
提问by Rohan
My website is image intensive which means images take up a huge amount of my page load time.
I am using the google maps API which works better if run on a window loadevent, however given that window load waits for all images to load first, the user experience on the map is affected negatively to an extent.
我的网站是图像密集型的，这意味着图像占用了我大量的页面加载时间。我正在使用谷歌地图 API，如果在window load事件上运行它会更好地工作，但是鉴于窗口加载等待所有图像首先加载，地图上的用户体验在一定程度上受到负面影响。
This can be remedied if I can get a separate event that targets just the completion of loading for the script files and begins rendering the map without concerning itself about the status of the images.
如果我可以获得一个单独的事件，该事件仅针对脚本文件的加载完成并开始渲染地图而不关心图像的状态，则可以解决此问题。
Now I know this is a weird thing to do, but given the scenario I have explained, any insights or workarounds over this will be helpful.
现在我知道这是一件很奇怪的事情，但鉴于我已经解释过的情况，任何对此的见解或解决方法都会有所帮助。
PS : Since I am loading my maps with the cluster module, I have no other option but to wait for all the scripts to load first, hence document readyis not an option. Also loading scripts before the map initiation js doesn't work since the map clustering always occurs with a delay loading external javascript and hence I have to rely on window load.
PS：由于我正在使用集群模块加载我的地图，我别无选择，只能等待所有脚本先加载，因此document ready不是一个选项。在地图启动 js 之前加载脚本也不起作用，因为地图集群总是在加载外部 javascript 时出现延迟，因此我必须依赖window load.
回答by Goran B.
This I found works form me:
这是我发现的作品：
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
init(); // this is the function that gets called when everything is loaded
}
}, 10);
reference: http://callmenick.com/post/check-if-everything-loaded-with-javascript
参考：http: //callmenick.com/post/check-if-everything-loaded-with-javascript
回答by Kevin B
DOMReady is about as close as you can get.
DOMReady 几乎是你所能得到的。
$(document).ready(function(){
//run the code here
});
Unfortunately, if the scripts you are loading further load more scripts, you can't really detect that other than watching for specific properties of the window to become available using a setInterval.
不幸的是，如果您正在加载的脚本进一步加载更多脚本，除了使用 setInterval 观察窗口的特定属性是否可用之外，您无法真正检测到这一点。
回答by Brad Christie
DOMReady is about as close as you'll get, though (if you aren't) you should be following "scripts last" rule of thumb.
DOMReady 与您将获得的差不多，但是（如果您不是）您应该遵循“脚本最后”的经验法则。
<body>
<!-- Content -->
<!--
Other JavaScript Files
-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initializeMap"></script>
<script type="text/javascript">
function initializeMap(){ // as specified with callback= above
var map = new google.maps.Map(...),
...;
// etc.
}
</script>
</body>
With that said, if images are the bottleneck, you may want to look in to lazy-loadingthem using some kind of plugin (jquery one referenced). this keeps bandwidth low, load time fast, and content remains "on-demand" (if they scroll down they'll get the additional content, otherwise it's never loaded).
话虽如此，如果图像是瓶颈，您可能需要使用某种插件（引用了 jquery 的插件）来查看延迟加载它们。这可以保持低带宽，快速加载，并且内容保持“按需”（如果他们向下滚动，他们将获得额外的内容，否则永远不会加载）。
回答by user2782001
okay there is a way to do this, but you may not like it because it only works in modern browsers.
好的，有一种方法可以做到这一点，但您可能不喜欢它，因为它仅适用于现代浏览器。
In HTML5 script elements have a property called async. If you set this to false with Javascript, scripts are added and run in the order they are presented in your page code.
在 HTML5 脚本元素中有一个称为 async 的属性。如果您使用 Javascript 将此设置为 false，则脚本将按照它们在页面代码中的显示顺序添加和运行。
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
