加载页面后运行javascript [重复]

Posted 2023-02-16

【中文标题】加载页面后运行javascript [重复]

【英文标题】：running javascript after page has been loaded [duplicate]

【发布时间】：2013-03-28 06:04:17

【问题描述】：

我目前有一个 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);

【问题讨论】：

@mplungjan - $ 作为变量传入，但永远不会发出 $()。

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

@ian 我看到了（不知道首字母缩写词）但忽略了它，因为它看起来更像是某种保护 jquery 的方法而不是需要的方法。我们将看到 OP 实际需要什么

@mplungjan benalman.com/news/2010/11/… , ***.com/questions/8228281/…

立即调用的函数表达式

【参考方案1】：

如果您想等到所有元素都加载完毕，您可以使用$(window).on("load") 而不是$(document).ready：

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

【讨论】：

我发现 window 的 load 事件在某些情况下也比 document.ready 更合适。

@mplungjan - 我需要在窗口而不是文档上使用加载版本的情况是，图像仍在视差站点中加载，或者在就绪事件触发时正在渲染图像。我发现在这些情况下使用 ready 时，尺寸有时会略有偏差。

这就像一个魅力，只是等到我可以将其标记为已回答。

@JeffShaver - 是什么取代了load？在这些情况下，我通常只使用window.onload = function() 而不是 jquery。

.load() 被弃用与"load" 事件之间存在差异。只需使用 .on("load", function () ); 代替。 $(window).on("load", function () ); 和 $(document).ready(function () ); 之间有一个主要区别