Fatal编程技术网
  • javascript/
  • 加载所有脚本文件后激发的Javascript事件

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

javascript jquery

加载所有脚本文件后激发的Javascript事件,javascript,jquery,Javascript,Jquery,我的网站是图像密集型的，这意味着图像占用了我大量的页面加载时间。 我使用的是google maps API，如果在窗口加载事件上运行，效果会更好，但是如果窗口加载等待首先加载所有图像，那么地图上的用户体验会受到一定程度的负面影响 如果我可以得到一个单独的事件，该事件只针对脚本文件的加载完成，并开始渲染贴图，而不考虑图像的状态，则可以解决此问题 现在我知道这是一件很奇怪的事情，但是考虑到我已经解释过的场景，任何关于这一点的见解或解决方法都会很有帮助 PS：由于我正在使用集群模块加载地图，因此我没有

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

如果我可以得到一个单独的事件，该事件只针对脚本文件的加载完成，并开始渲染贴图，而不考虑图像的状态，则可以解决此问题

现在我知道这是一件很奇怪的事情，但是考虑到我已经解释过的场景，任何关于这一点的见解或解决方法都会很有帮助

PS：由于我正在使用集群模块加载地图，因此我没有其他选择，只能等待所有脚本首先加载，因此
文档就绪
不是一个选项。此外，在映射启动之前加载脚本js也不起作用，因为映射集群总是在加载外部javascript时发生延迟，因此我必须依赖于
窗口加载
DOMReady尽可能接近


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



不幸的是，如果您正在加载的脚本进一步加载更多的脚本，那么除了使用setInterval观察窗口的特定属性是否可用之外，您无法真正检测到这一点。
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>




函数initializeMap（）{//如上面用callback=指定的
var map=new google.maps.map（…），
...;
//等等。
}



话虽如此，如果图像是瓶颈，您可能希望使用某种插件（jqueryone引用）查看它们。这样可以保持低带宽、快速加载，并且内容保持“按需”（如果向下滚动，他们将获得额外的内容，否则就永远不会加载）。好的，有一种方法可以做到这一点，但您可能不喜欢它，因为它只适用于现代浏览器

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


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



这是我从自己那里找到的作品：


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



参考：
也许你应该连接/缩小所有javascript，并在最后启动google地图。这取决于布局，但你可以尝试延迟加载图像。或者甚至将src保留为空，并使用src设置数据属性。然后在加载时，您可以将所有图像src设置为其相应的数据属性。这样，窗口加载事件将在图像下载之前触发。所有图像都将与地图一起加载，而不是before@Smeegs-是的，我正在对窗口外的内容进行延迟加载，需要在页面加载期间显示窗口上的图像以进行SEO。对我的问题进行了编辑，进一步澄清了我试图表达的观点，这就是为什么提供的任何解决方案都无法使用的原因。我的延迟加载工作正常，但是当涉及到使用clusterers加载地图时，domready不是一个选项，即使使用javascript在脚本文件之后启动地图，群集对象也永远不会完全加载，因此，我别无选择，只能确保使用窗口加载加载所有js。这是有趣的+1，并不能解决我的目的，尽管这正是我的问题，主地图js为集群加载外部模块-这是一个非常有助于加快网页速度的事件。谢谢。这会等待脚本标记上的异步标志吗？@chovy如果在dom准备好时脚本已经完成，当然。但这并没有得到保证（而且可能不太可能）