js的onload方法，总是再html背景图片加载完成前就已经运行，该如何解决？

html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="F:/TailwindStudy/dist/output.css" rel="stylesheet">
head>

<body background="./UserLogin-background-init.jpg" class="bg-cover" id="UserLoginBody">
    <script src="F:TailwindStudy/src/UserLogin.js" type="text/javascript">script>
body>

window.onload = function () {
    alert("运行");
}

如上图，背景图片还没有加载，提示框就已经显示，该如何解决？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="img" src="http://xxxxxx.jpg" alt="">
    <script>
    // 方法一：图片已经下载完
 document.getElementById('img').onload = function(e){
         e.stopPropagation();
     } </script>
</body>
</html>

https://www.jianshu.com/p/02761bdb69cf

alert会挂起图片的渲染，实际背景图已经全部加载了。用setTimeout延时0ms执行alert，脱离渲染线程就看到了


        window.onload = function () {
            setTimeout(() => { alert("运行")},0);
        }

关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：js加载事件（onload）

试一下
body onload="alert('加载完成')"
记得两头放尖括号

onload是在页面节点加载完成之后触发的，注意是页面节点加载之后，img标签中的图片是异步加载的，onload函数不会等它执行完成之后才触发，这也是为了能让你的页面正常显示，如果你的页面里有十张图片，其中一张图片是坏掉的无法显示，那么按照你之前的想法页面就无法正常运行了

你对onload的理解有点偏差，onload是在页面所有节点加载完成就触发，而不是等某一个标签的内容完全显示才触发，像你的背景图片过大，实际他已经加载过了，只是显示有点慢

alert和window.print一样，一旦触发会阻断所有的渲染操作（代码的运行不会阻断），背景图片的渲染也是需要时间的，要想实现只能通过延迟定时器，尽可能让渲染的操作完成之后再去执行，给定时器给个100-500ms，即使是使用1楼方法在图片的onload完成之后不使用定时器仍然无法实现