实现在html页面加载之后执行js方法_html加载完后加载js-CSDN博客

本文链接：https://blog.csdn.net/qq_43030934/article/details/111955265

方法一、JS方法οnlοad="load();

1.最简单的调用方式，直接写到html的body标签里面：

<html> 
    <body onload="load();">
    </body> 
</html>

方法二：window.οnlοad=function

引入js,在script中使用window.onload=function方法

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">window.onload=initUploaderInput()</script>

或

<script src="../static/js/photoMgt.js"></script>
<script type="text/javascript">
    initUploaderInput()
</script>

方法三：$(function () { }

引入jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var arr = [
    'xxxxSensor', 'bbbbbbbb'
];
        var box = document.getElementById('box');
        for (var i = 0; i < arr.length; i++) {
//        box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
            if (i == 0) {
                box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
            } else {
                box.childNodes[0].innerHTML += '<li>' + arr[i] + '</li>';
            }
        }
    })
</script>
</body>
</html>

方法四：window.addEventListener(“load”, onloadContent, false);

先在html文件中引入相关js文件：

<script type="text/javascript" src="scroll.js"></script>

再js中使用函数：window.addEventListener("load", onloadContent, false)

function srollContent() {
    setTimeout(move, 1000);//执行一次定时器
}

//滚动方法
function move() {
    var scrollTop = document.getElementById("scrollTop");
    var scrollContent = document.getElementById("scrollContent");
    var contentUl = scrollContent.children[0];
    // var scrollTopUp = scrollTop.children[0];//向上滚动
    // var scrollTopDown = scrollTop.children[1];//向下滚动


    var direction = 1;//方向
    var timer = null;//定义定时器
    contentUl.innerHTML += contentUl.innerHTML;
    timer = setInterval(function () {
        console.log(contentUl.offsetTop)
        contentUl.style.top = contentUl.offsetTop + direction + 'px';
        // console.log("获取当前元素到顶部的距离：" + contentUl.offsetTop);
        // console.log("获取当前元素的高度：" + contentUl.offsetHeight);


        //向上滚动小于当前元素高度的一半时，则执行如下操作
        if (contentUl.offsetTop <= -contentUl.offsetHeight / 2) {
            contentUl.style.top = 0;
        }
        //向下滚动大于0时，则执行如下操作
        else if (contentUl.offsetTop >= 0) {
            contentUl.style.top = -contentUl.offsetHeight / 2 + "px";
        }
    }, 30);
}

function onloadContent() {
    var arr = [
 	'a', 'b'
];
    var box = document.getElementById('scrollContent');
    for (var i = 0; i < arr.length; i++) {
//        box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
        if (i == 0) {
            box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
        } else {
            box.children[0].innerHTML += '<li>' + arr[i] + '</li>';
        }
    }
    // srollContent();
}


window.addEventListener("load", onloadContent, false);