jquery 页面加载完毕后执行

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在页面加载完毕后执行某些操作，通常是指在 DOM（文档对象模型）完全加载并解析完成后执行 JavaScript 代码。

类型与应用场景

类型

$(document).ready()：当 DOM 完全加载并解析完成后执行。
$(window).load()：当整个页面（包括所有依赖的资源如图像、CSS、脚本等）完全加载后执行。

应用场景

初始化插件：在页面加载完毕后初始化第三方插件。
绑定事件：在 DOM 准备好后绑定事件处理程序。
动态内容加载：在页面加载后动态插入或修改内容。

示例代码

使用 $(document).ready()

$(document).ready(function() {
    // 页面加载完毕后执行的代码
    console.log("DOM is ready!");
    // 绑定事件
    $("#myButton").click(function() {
        alert("Button clicked!");
    });
});

使用 $(window).load()

$(window).load(function() {
    // 整个页面加载完毕后执行的代码
    console.log("Page is fully loaded!");
});

遇到的问题及解决方法

问题：代码在页面加载完毕前执行

原因：可能是由于脚本放在了 <head> 标签中，导致在 DOM 完全加载前就执行了。

解决方法：

将脚本放在 <body> 标签的底部。
使用 $(document).ready() 确保代码在 DOM 加载完毕后执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">Click me</button>
    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                alert("Button clicked!");
            });
        });
    </script>
</body>
</html>

问题：某些元素在 $(document).ready() 中不可用

原因：可能是由于这些元素是通过 Ajax 或其他异步操作动态加载的。

解决方法：

使用事件委托来处理动态加载的元素。
在元素实际加载后再绑定事件。

$(document).ready(function() {
    $(document).on('click', '#dynamicButton', function() {
        alert("Dynamic button clicked!");
    });
});

通过以上方法，可以确保在页面加载完毕后正确执行所需的 JavaScript 代码，并有效处理常见的加载问题。

页面内容是否对你有帮助？

有帮助

没帮助

脚本执行时的模式加载消息

、、、、

基本上，我有一个由Java提供给DOM的大型数据表，在页面加载数据表时加载，但随后由外部脚本(DataTables @ datatables.net)解析，该脚本设置网格样式并向网格添加功能。问题是，表显示在页面上，没有样式，并且没有data tables脚本的功能，然后在脚本执行完毕后消失并重新加载。我想做的是在页面加载时通过jQuery隐藏页面上的所有内容，然后在脚本执

浏览 1提问于2011-01-27得票数 1

1回答

从选择框中删除项目

、、、、

我正在尝试从选择框下拉菜单中删除一个项目(value=155 / 'Fruits')。 <div class="control select"> name="product_cat[]" style="" data-parsley-maxcheck

浏览 17提问于2021-02-11得票数 0

1回答

单击并加载页面后，jquery

我想知道如何在jquery中执行两个事件。所以，在我点击按钮和页面结束加载，然后显示警报。所以当我提交后页面已经加载完毕，警报按摩就会显示出来。

浏览 1提问于2017-05-17得票数 1

回答已采纳

1回答

如何使用JavaScript或jQuery实现内部网站链接点击执行，然后转到点击链接

、、

我希望实现以下目标：用户点击inbound网站链接，javascript/jquery会先执行一些内容，执行完毕后再加载下一个页面。

浏览 3提问于2020-08-24得票数 0

3回答

jQuery移动等待下一页准备就绪后再加载

、

我一直在试验jQuery手机。我正在尝试实现以下内容我想显示jquery移动加载弹出，直到页面准备就绪，然后继续。在“列表视图”和“列表性能测试”下的jQueryMobile文档和演示中，这将按照我希望的方式执行。我试过绑定到

浏览 4提问于2011-03-24得票数 3

回答已采纳

2回答

当.load请求挂起时不能刷新页面

、、、

但是你的朋友越多，载入页面的时间就越长。如果我尝试刷新页面或在页面请求好友列表时退出，它只会继续加载直到获取好友列表，然后再刷新页面或注销。如何修复，以使我可以刷新页面，而不必等待请求被执行。下面是我用来在PHP文件中加载的jQuery： $(

浏览 5提问于2017-08-03得票数 0

回答已采纳

1回答

JQuery .html()不工作

、、、、

我使用的是 + JQuery，.html()函数不起作用，参见： <ons-page> <div class="center">Clone

浏览 8提问于2017-11-13得票数 1

回答已采纳

2回答

在不使用Thread.sleep或在jquery中给出一定时间的情况下锁定屏幕

、、

大家好，我有一个要求，当我执行任何操作时，我必须显示加载图像。我浏览了几篇博客和文章，但它们都在做一些事情，比如在Jquery或使用的脚本中花费一些时间，或者使用Thread.Sleep方法。这意味着我不知道加载一个页面需要多长时间，除非页面加载完成，否则我会为用户显示等待屏幕。

浏览 1提问于2012-11-06得票数 0

回答已采纳

1回答

如何从不同aspx页面运行java脚本

嗨，我有一个带有链接的aspx页面。如果我单击该链接，我希望页面被重定向到另一个aspx页面，并执行其中java脚本。..。请谁来帮帮忙..。

浏览 0提问于2010-02-05得票数 0

回答已采纳

1回答

在加载的jsp页面上添加一个模式窗口

、

我正在创建一个jsp page.Index.jsp，，我希望当这个index.jsp加载时，会出现一个模式弹出，它会要求用户输入一些information.Please，让我知道如何添加它。

浏览 3提问于2012-04-17得票数 0

1回答

如果禁用Javascript，则跳过页面加载器

、

我有一个ajax加载器，它会一直显示，直到页面上的所有内容都加载完毕，但是它是使用javascript执行的，所以如果用户禁用了javascript，加载器会继续显示无限长的时间。有没有办法绕过这个脚本，或者在经过一定的“加载时间”后直接显示页面？

浏览 7提问于2013-06-05得票数 0

1回答

我可以让jQuery手机只显示一个页面后，所有的图片都加载了吗？

、、、

我正在用jQuery手机构建一个图像密集型移动web应用程序。它与一些相当不错的UX功能具有很强的交互性。然而，如果一个人开始与一些页面交互，直到所有图像都加载完毕，这将会破坏体验。有没有一种方法可以让页面只在所有图像加载后显示？

浏览 5提问于2013-04-11得票数 1

回答已采纳

2回答

加载所有图像后执行代码

、、

在加载所有图像(需要保存图像的元素的高度并使用它们更改其他元素的高度)之后，我希望对所有图像进行一些接口修复，我将load事件附加到所有图像，但我的load函数只执行一次。我尝试只使用jQuery： var $img = $('img'); var count = 0我还尝试使用onload和onerror事件： this.onload = load; t

浏览 2提问于2013-12-12得票数 0

回答已采纳

2回答

等待现代从用户脚本加载jQuery

、、、

我正在开发一个Google Chrome用户脚本，它增强了一个通过加载的网站。(我尽量避免加载自己的jQuery实例，并且使用轮询时，有时会错过使用截取的文档的第一次更改。)

浏览 0提问于2012-09-30得票数 0

1回答

完成rivets.js绑定后执行某些功能

我正在尝试执行一些只在铆钉完成绑定之后才运行的jQuery？(它是一个$().each，它支持在铆钉将列表绑定到rv-每个li元素之后创建的每一行的单击事件) 它不能工作，但是如果我尝试在页面加载完毕和铆钉完成绑定后(在浏览器控制台上)手动调用函数，那么一切都很好

浏览 2提问于2014-08-05得票数 2

1回答

在Google管理器中包含jQuery相关代码

、、

我们有javascript代码，它使用jQuery，我们需要使用GTM注入页面。 GTM代码就包括在body标记定义之后。如何将jQuery代码包含在等待jQuery可用的GTM中？

浏览 1提问于2015-09-19得票数 0

回答已采纳

2回答

延迟加载js时$(document).load()和$(document).ready()的顺序

、、

在ready()函数中有几个内联的js和jquery函数： $(document).ready(function(){ do_something(); ...JS之前，页面将被完全呈现，包括所有图像。$(document).ready()不是在onLoad之前执行吗？在执行$(document).ready时，我不会冒着没有定义必要函数的风险吗？但是，哪个onLoad()会首先执行呢？加载外部js (在header中定义)的js还是内联js？更改ready to load会失去什么？顺便

浏览 2提问于2013-01-06得票数 9

3回答

尝试掌握JavaScript动画的诀窍

、、

基本上，我想要实现的是让一个图像从页脚上升到页面的中心，我已经学会了如何使用CSS来做到这一点。但我想让它在页面自动加载时上升。如果有人能给我指出正确的方向，或者给我举一些例子，我将不胜感激。

浏览 1提问于2013-01-17得票数 3

回答已采纳

1回答

如何在幻影中使用回调

但是，我面临的问题是页面加载方式，有时执行幻影脚本，但dom元素没有加载。

浏览 4提问于2013-08-23得票数 0

回答已采纳

2回答

函数执行完毕后加载表

、

我有一个默认情况下隐藏的表，我希望仅在JavaScript (frameLooper())函数完成executing.The JavaScript (frameLooper())函数在页面加载期间呈现文本消息后才显示它

浏览 0提问于2015-03-28得票数 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

jquery 页面加载完毕后执行

基础概念

相关优势

类型与应用场景

类型

应用场景

示例代码

使用 $(document).ready()

使用 $(window).load()

遇到的问题及解决方法

问题：代码在页面加载完毕前执行

问题：某些元素在 $(document).ready() 中不可用

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐