jQuery 页面加载事件上的jQuery不起作用

jQuery on page load event not working

提问by Tamas B.

I want to my text fade in when page is loaded, i tried with this code-

我想在页面加载时淡入我的文本，我尝试使用此代码-

 $(document).on("load", function () {
    $("#div1").fadeIn();
});

Why this not working? I'm using 3.1.1

为什么这不起作用？我正在使用 3.1.1

回答by Malcolm

You should be passing .on("load") on the windowinstead of the document:

您应该在window而不是文档上传递 .on("load") ：

$(window).on("load", function () {
    $("#div1").fadeIn();
});

Alternatively, you could call .ready() on the document:

或者，您可以在文档上调用 .ready() ：

$(document).ready(function () {
    $("#div1").fadeIn();
});

回答by Anant Singh---Alive to Die

Either use load()with window()or ready()with document():-

或者使用load()与window()或ready()有document()-

All possible examples:-

所有可能的例子：-

$(document).on("ready", function () {
    $("#div1").fadeOut('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id = "div1">this is working!<div>

$(document).ready(function () {
        $("#div1").fadeOut('slow');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div1">this is working!<div>

$(window).load(function () {
        $("#div1").fadeOut('slow');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div1">this is working!<div>

$(window).on('load',function () {
        $("#div1").fadeOut('slow');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div1">this is working!<div>

Note:-

笔记：-

I have used fadeOut()to show you that code is working.

我曾经fadeOut()向您展示代码正在运行。

$(window).load(function ()does not work in latest versions like jQuery 3.1.1 so use $(window).on(load,function (){..});

$(window).load(function ()在像 jQuery 3.1.1 这样的最新版本中不起作用所以使用 $(window).on(load,function (){..});

回答by eeetee

Make sure your code is wrapped in

确保您的代码包含在

$(document).ready(function() {

});

Also, since you are using version 3 of jQuery, the following are supported:

此外，由于您使用的是 jQuery 版本 3，因此支持以下内容：

Internet Explorer: 9+

浏览器：9+

Chrome, Edge, Firefox, Safari: Current and Current - 1

Chrome、Edge、Firefox、Safari：当前和当前 - 1

Opera: Current

歌剧：当前

Safari Mobile iOS: 7+

Safari 移动版 iOS：7+

Android 4.0+

安卓 4.0+

If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12

如果您需要支持旧浏览器，如 Internet Explorer 6-8、Opera 12.1x 或 Safari 5.1+，请使用 jQuery 1.12

回答by shokulei

I tested on the snippet. You can use $(function() { }); instead since jQuery 1.2.3.

我在片段上进行了测试。您可以使用 $(function() { }); 而是从 jQuery 1.2.3 开始。

$(function () {
    $("#div1").fadeIn();
    $("#div1").fadeOut();
    $("#div1").fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">Fade in div</div>

回答by Jonathan Marzullo

Try checking the "load"on the windowinstead of the document

尝试检查"load"在window而不是document

$(window).on("load", function () {
   $("#div1").fadeIn();
});

You could also make sure the DOM is ready and the window is loaded

您还可以确保 DOM 已准备好并且窗口已加载

// check the DOM is ready
$(document).ready(function () {
     // check window is loaded meaning all external assets like images, css, js, etc
     $(window).on("load", function () {
          $("#div1").fadeIn();
     });
});

Sometimes the DOMcan be ready before the windowis fully loaded due to network connectivity and server response time. And sometimes the windowcan be loaded before the DOMis ready if the server is fast and no connectivity issues. But this ensures the DOM(document) is ready along with the windowbeing fully loaded. If the windowis loaded before the DOM then when DOMis ready the windowwill fire immediately.

由于网络连接和服务器响应时间的原因，有时DOM可以在window完全加载之前准备好。如果服务器速度快且没有连接问题，有时window可以在DOM准备好之前加载。但这可确保DOM（文档）已准备好并window已完全加载。如果在windowDOM 之前加载，那么当DOM准备好时window将立即触发。

回答by Rahul

Try using window in place of document: Here's a link!

尝试使用窗口代替文档：这是一个链接！

    $( window ).load(function() {
     // Run code
     $("#div1").fadeIn();
    });