如何在jQuery-3.3.1中调用$(window).on("load", function)？

Question

我刚刚开始使用 jquery-3.3.1，还有我的 onload()；功能不再工作。我知道这已更新，所以我将 window.onload = function(e) 更改为 $(window).on("load", function (e)，但无法正常工作...此代码有什么问题？现在如何调用加载函数？

$(window).on("load", function (e) {
    var videoSource = new Array();

     videoSource[0] = 'video1.mp4';
     videoSource[1] = 'video2.mp4';

var i = 1; // define i
var videoCount = videoSource.length;

function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 1)) {
        i = -1;
        videoPlay(0);
    } else {
        i = 0;
        videoPlay(1);
    }
}
})

这是我的 html:

<video playsinline autoplay muted id="myVideo" type="video/mp4" onload="onload();" poster="poster.png"></video>

已解决：问题源于此，我在（或？）$(document).ready(function() 之前使用此 window.onload = function() ...抱歉，伙计们，我非常喜欢 javascript，只是现在正在学习这门语言的基础知识。现在可以使用您所有的解决方案，非常感谢您的所有回复！

Answer 1

使用 $(document).ready() 而不是 $(window).on("load", function...

$(document).ready(function() {
    console.log("ready!");
});

或其shorthand:

$(function() {
    console.log("ready!");
});

你的情况是：

$(function() {
    var videoSource = new Array();

    videoSource[0] = 'video1.mp4';
    videoSource[1] = 'video2.mp4';

    var i = 1; // define i
    var videoCount = videoSource.length;

    function videoPlay(videoNum) {
        document.getElementById("myVideo").setAttribute("src", 
        videoSource[videoNum]);
        document.getElementById("myVideo").load();
        document.getElementById("myVideo").play();
    }

    document.getElementById('myVideo').addEventListener('ended', myHandler, false);
    videoPlay(0); // play the video

    function myHandler() {
        i++;
        if (i == (videoCount - 1)) {
            i = -1;
            videoPlay(0);
        } else {
            i = 0;
            videoPlay(1);
        }
    }
})

More on this subject. Also checkout .

Answer 2

不使用$(window).on("load")...，而是使用$(document).ready(function)

此外，值得注意的是现在很多浏览器都禁用了自动播放功能，因此请注意这一点。

$(document).ready(function (e) {
    var videoSource = new Array();

     videoSource[0] = 'video1.mp4';
     videoSource[1] = 'video2.mp4';

var i = 1; // define i
var videoCount = videoSource.length;

function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 1)) {
        i = -1;
        videoPlay(0);
    } else {
        i = 0;
        videoPlay(1);
    }
}
})

Answer 3

由于除了等待加载文档外没有使用 jQuery，因此只需将其替换为纯 js

window.onload = function() {
    // let's go!
}

请注意，许多浏览器（例如 Safari）会阻止自动播放视频。一旦其他浏览器也采用了这一点，您的代码将不再有效。

如何在jQuery-3.3.1中调用$(window).on("load", function)？

How to call $(window).on("load", function) in jQuery-3.3.1?

javascript

jquery

onload