Question

我的网站是图片密集型的，这意味着图片占用了大量的页面加载时间。我正在使用google maps API，如果在window load事件上运行，效果会更好，但是如果窗口加载等待所有图像首先加载，则地图上的用户体验会受到一定程度的负面影响。

如果我可以获得一个单独的事件，只针对脚本文件的加载完成，并开始渲染地图而不关心图像的状态，这可以解决。

现在我知道这是一件很奇怪的事情，但鉴于我已经解释过的情况，任何有关此方面的见解或解决方法都会有所帮助。

PS：由于我使用群集模块加载我的地图，我没有其他选择，只能等待所有脚本先加载，因此document ready不是一个选项。在地图启动之前加载脚本js也不起作用，因为地图聚类总是在加载外部javascript的延迟时发生，因此我必须依赖window load。

Answer 1

我找到了作品：

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);

参考：http://callmenick.com/post/check-if-everything-loaded-with-javascript

Answer 2

DOMReady尽可能接近。

$(document).ready(function(){
    //run the code here
});

不幸的是，如果您要加载的脚本会进一步加载更多脚本，那么除了使用setInterval监视窗口的特定属性之外，您无法检测到其他内容。

Answer 3

好的，有办法做到这一点，但你可能不喜欢它，因为它只适用于现代浏览器。

在HTML5脚本元素中有一个名为async的属性。如果使用Javascript将其设置为false，则会添加脚本并按照页面代码中显示的顺序运行。

var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);

link to reference

Answer 4

DOMReady与你的关系差不多，但是（如果你不是）你应该关注＆＃34;脚本最后一次＆＃34;经验法则。

<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>

话虽如此，如果图像是瓶颈，你可能想要使用某种插件（引用的jquery）来查看它们lazy-loading。这样可以保持带宽低，加载时间快，内容保持按需“＃34; （如果他们向下滚动，他们将获得额外的内容，否则它们永远不会被加载）。

加载所有脚本文件后要触发的Javascript事件

4 个答案: