Question

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

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

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

Answer 1

你应该在window而不是文件上传递.on（“加载”）：

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

或者，您可以在文档上调用.ready（）：

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

Answer 2

将load()与window()或ready()与document()一起使用： -

所有可能的示例： -

$(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>

<强> 注： -

我使用fadeOut()向您展示代码正常运行。

$(window).load(function ()在jQuery 3.1.1等最新版本中无效，请使用$(window).on(load,function (){..});

Answer 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>

Answer 4

确保您的代码包含在

中

$(document).ready(function() {

});

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

Internet Explorer：9 +

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

Opera：当前

Safari Mobile iOS：7 +

Android 4.0 +

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

Answer 5

尝试检查"load"上的window而不是document

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

您还可以确保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();
     });
});

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

Answer 6

尝试使用窗口代替文档：这是a link！

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

jQuery页面加载事件无法正常工作

6 个答案: