Turbolinks 加载事件在页面加载时不起作用
Turbolinks load event doesn't work on page load
我对当前默认的 turbolinks 推荐加载事件有疑问:
document.addEventListener('turbolinks:load', function() {
…
});
发生的情况是加载页面时不会在 Safari 上触发。因此我将 Turbolinks.dispatch("turbolinks:load");
附加到 application.js
.
它似乎工作正常。但是在 Chrome,它确实自动触发了,所以它最终发生的是 turbolinks:load
事件的双重触发。
我的第一个修复是仅在非 Chrome 浏览器上触发 turbolinks:load
。
但不知何故,即使在 Chrome 上,某些视图也不会自动触发 turbolinks:load
。所以我最终也不得不在特定视图上触发它。
我找到的最终解决方案是使用:
$(document).on('ready turbolinks:load', function() {
…
});
这似乎解决了所有问题,因为它会在第一页加载或重新加载以及我单击链接时触发。它还会在 Chrome 和 Safari 上触发。
有没有更好的方法来处理这个问题?
文档说第一个版本是正确的,但事实似乎并非如此。
我是不是漏掉了什么?
(注意:使用 jQuery 对我来说不是缺点,我知道我可以用几个 document.addEventListener
来实现它)
如评论中所述,您正在使用 async
加载 Turbolinks。 Turbolinks 目前在异步加载时效果不佳。所以目前最好的建议是从脚本标签中删除 async
属性,或者使用 defer
代替。
为什么?
Turbolinks 在第一次加载时侦听 DOMContentLoaded
事件,然后触发 turbolinks:load
。通过异步加载,脚本可能会在 loading/executing 之后完成 HTML 已被解析并触发 DOMContentLoaded
。在这种情况下,turbolinks:load
不会被解雇。
目前有一个 GitHub 问题来讨论图书馆实施的一些可能的解决方案:https://github.com/turbolinks/turbolinks/issues/281
我对当前默认的 turbolinks 推荐加载事件有疑问:
document.addEventListener('turbolinks:load', function() {
…
});
发生的情况是加载页面时不会在 Safari 上触发。因此我将 Turbolinks.dispatch("turbolinks:load");
附加到 application.js
.
它似乎工作正常。但是在 Chrome,它确实自动触发了,所以它最终发生的是 turbolinks:load
事件的双重触发。
我的第一个修复是仅在非 Chrome 浏览器上触发 turbolinks:load
。
但不知何故,即使在 Chrome 上,某些视图也不会自动触发 turbolinks:load
。所以我最终也不得不在特定视图上触发它。
我找到的最终解决方案是使用:
$(document).on('ready turbolinks:load', function() {
…
});
这似乎解决了所有问题,因为它会在第一页加载或重新加载以及我单击链接时触发。它还会在 Chrome 和 Safari 上触发。
有没有更好的方法来处理这个问题?
文档说第一个版本是正确的,但事实似乎并非如此。
我是不是漏掉了什么?
(注意:使用 jQuery 对我来说不是缺点,我知道我可以用几个 document.addEventListener
来实现它)
如评论中所述,您正在使用 async
加载 Turbolinks。 Turbolinks 目前在异步加载时效果不佳。所以目前最好的建议是从脚本标签中删除 async
属性,或者使用 defer
代替。
为什么?
Turbolinks 在第一次加载时侦听 DOMContentLoaded
事件,然后触发 turbolinks:load
。通过异步加载,脚本可能会在 loading/executing 之后完成 HTML 已被解析并触发 DOMContentLoaded
。在这种情况下,turbolinks:load
不会被解雇。
目前有一个 GitHub 问题来讨论图书馆实施的一些可能的解决方案:https://github.com/turbolinks/turbolinks/issues/281