IE11中使用.load()加载页面时Masonry初始化失败问题

这问题我之前碰到过类似的，IE11在异步DOM操作的时机处理上确实有不少坑，咱们一步步来拆解：

为什么独立JS文件里的代码会失败？ #

你原来的代码用了$(window).on("load", ...)，这个事件是页面初始的所有资源（图片、样式、脚本）加载完成后才触发的。但你是通过.load()方法异步加载新的HTML内容，这部分内容是在window.load事件触发之后才被插入到DOM里的——也就是说，当你的独立JS文件里的window.load回调执行时，.searchResults或者.resultGrid这些元素根本还不存在，Masonry自然找不到目标元素，初始化就失败了。

而且IE11对DOM节点的存在性检测比现代浏览器更“死板”，不会自动等待异步内容加载完成，所以这个时机差在IE11里会直接导致代码失效，而现代浏览器可能因为事件循环的优化，偶尔能“侥幸”运行，但这也是不可靠的。

为什么放在.load()回调里就正常？ #

.load()方法的回调函数是在异步加载的HTML内容完全插入到DOM之后才触发的，这时候目标元素已经实实在在存在于页面中了，Masonry能正确找到并初始化网格，自然就能正常运行。

优化后的代码建议 #

其实你不需要在.load()回调里再嵌套$(window).load()，因为.load()回调本身就是内容加载完成的正确时机，直接初始化Masonry就行，另外键盘事件里的$grid.masonry()改成$grid.masonry('layout')更符合Masonry的API规范：

// 假设这是你调用.load()加载内容的代码
$(".your-target-container").load("path/to/your/content.html", function() {
  // 直接初始化Masonry
  var $grid = $(".searchResults").find('.resultGrid').masonry({
    itemSelector: '.gridItem',
    gutter: '.gutterComponent'
  }).on("layoutComplete", function(event, laidOutItems) {
    console.log("It has loaded!");
    $(".searchResults").addClass("show");
  });

  // 键盘输入时重新布局网格
  $(document).on("keyup", ".searchContainer input", function() {
    $grid.masonry('layout');
  });
});

核心总结 #

异步加载的内容，其初始化逻辑必须绑定在内容插入DOM完成的时机上，window.load只负责页面初始资源的加载，和后续动态插入的内容完全无关。IE11没有现代浏览器的一些自动兼容机制，所以这个时机问题会被放大，必须严格遵循异步操作的回调时机来写代码。

内容的提问来源于stack exchange，提问作者Zander