页面加载后运行JavaScript

Question

我目前有一个JavaScript文件，我在视图页面中调用它来获取我的数据信息以显示。同时，我有这段JavaScript代码，一旦单击图像就会显示菜单栏。这个脚本在页面完全加载之前或某些情况下运行，因此它无法正常工作。如何使我的JavaScript代码在所有其他脚本完成运行并加载页面后采取行动？这是我尝试过的，但没有正确工作：

JavaScript：

(function ($) {

.... lines to load view page with data

$(document).ready(function () {
    $('figure').on('click', function (event) {
        $(event.currentTarget).toggleClass('open');
    });
});

})(jQuery);

- Masriyah

---

@mplungjan传递了一个变量$，但从未使用过$()。 - Travis J

@mplungjan 外部表达式是一个IIFE，内部是 $(document).ready - Ian

@ian 我看到了（不知道这个缩写是什么），但我忽略了它，因为它看起来更像是保护jquery的一些方法，而不是实际需要的东西。我们将看看OP实际需要什么。 - mplungjan

@mplungjan http://benalman.com/news/2010/11/immediately-invoked-function-expression/，https://dev59.com/QGsy5IYBdhLWcg3w6yUN - Ian

立即执行函数表达式 - Jeff Shaver

Answer 1

如果您想等到所有元素加载完成，那么可以使用$(window).on("load")代替$(document).ready：

$(window).on("load", function(){
    $('figure').on('click', function (event) {
        $(event.currentTarget).toggleClass('open');
    });    
});

- dsgriffin

---

我需要使用窗口的 "load" 版本而不是文档版本的情况是在视差网站上图像仍在加载或当图像在 "ready" 事件触发时被渲染时。我发现在这些情况下，使用 "ready" 时尺寸有时会略微偏差。 - Travis J

这个方法非常有效，我只是在等待能够将其标记为已回答。 - Masriyah

@mplungjan您使用了document ready，这正是OP已经拥有的。这是window load。它们不一样。 - JJJ

.load() 被弃用和 "load" 事件之间有所不同。因此，只需使用 .on("load", function () {}); 即可。$(window).on("load", function () {}); 和 $(document).ready(function () {}); 之间存在重大差异。 - Ian

@JeffShaver 已更新。对不起，Amina，我并不是建议使用已弃用的方法。 - dsgriffin