时间戳

首页 > 解决方案 > document.ready 内 window.load 事件上的 domlistener

javascript - document.ready 内 window.load 事件上的 domlistener

问题描述

尽管 window.load 准备好后工作，但此代码停止工作。

$(document).ready(function () { google.maps.event.addDomListener(window, 'load', function () { InitializeMap(); });

But If I write the code outside the ready function, it works fine.

$(document).ready(function () {
    InitializeMap(); });

This code also works nice.

标签： javascriptjquerymaps

解决方案

这是一个与 jQuery 相关的问题。jQuery 使用它自己的内部延迟对象来表示“就绪”回调函数的列表。在此延迟对象中，可能会或可能不会出于各种原因设置超时，window.onload在某些情况下会被取消等等。jQuery 做了所有这些事情来确保跨浏览器的一致性。来自 jQuery 文档：

请注意，尽管 DOM 总是在页面完全加载之前准备就绪，但在 .ready() 处理程序期间执行的代码中附加加载事件侦听器通常是不安全的。例如，可以使用 $.getScript() 等方法在页面加载很久之后动态加载脚本。尽管 .ready() 添加的处理程序将始终在动态加载的脚本中执行，但窗口的加载事件已经发生，并且这些侦听器将永远不会运行。

参考

下面的纯 JavaScript 解决方案可以按照您的预期工作，因为 jQuery 的相同代码实现中并没有那么多额外的麻烦：

document.addEventListener('DOMContentLoaded', () => {
  google.maps.event.addDomListener(window, 'load', function() {
    alert('custom event');
  });
});
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

推荐阅读