为什么 pic.setAttribute('src', myImgOne);执行厚，大概五秒左右图片才加载出来，不应该立马加载出来吗

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            text-align: center;
            overflow: auto;
        }

        img {
            margin-top: 800px;
            height: 230px;
            width: 130px;
            background-color: blueviolet;
        }

        .dow {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <img src="" alt="" myImg="webp.webp.jpg" id="pic">
    <div class="dow"></div>
    <script>
        let pic = document.getElementById('pic');
        let myImgOne = pic.getAttribute('myImg');
        window.onscroll = function () {
            let scre = document.documentElement.clientHeight;
            let h = pic.clientHeight;
            let distance = pic.offsetTop;
            let boundin = pic.getBoundingClientRect().top;
            if (boundin < 0) {
                console.log('nice');
                pic.setAttribute('src', myImgOne);
            }
            return;
        }
        pic.onload = function () {
            console.log('ok');
        }

    </script>
</body>

</html>

你是放在window.onscrol，只有滚动才会执行

图片加载也是需要时间的，你这个是想表达，滚动时再加载图片吗？

图片可能太大?

你需要加锁不然一直滚动一直覆盖当然不会显示出来了