在JavaScript中，监听页面的加载有多种方式，这取决于你希望在何时执行特定的代码。以下是几种常见的页面加载事件监听方法：

1. window.onload

window.onload 事件在页面中的所有资源（如图片、样式表等）完全加载完成后触发。

window.onload = function() {
    // 页面加载完成后的代码
    console.log("页面加载完成");
};

2. DOMContentLoaded 事件

如果你只想在DOM结构完全加载后立即执行代码，而不需要等待样式表、图片和子框架的加载，可以使用 DOMContentLoaded 事件。

document.addEventListener('DOMContentLoaded', function() {
    // DOM加载完成后的代码
    console.log("DOM加载完成");
});

3. load 事件与 addEventListener

你也可以使用 addEventListener 方法来监听 load 事件，这种方式更加灵活，可以同时监听多个事件。

window.addEventListener('load', function() {
    // 页面加载完成后的代码
    console.log("页面加载完成");
});

4. 监听特定图片或其他资源的加载

如果你只想在特定的图片或资源加载完成后执行代码，可以使用该资源的 load 事件。

var img = new Image();
img.onload = function() {
    console.log("图片加载完成");
};
img.src = 'path/to/image.jpg'; // 设置图片源地址

5. 使用 Intersection Observer API（检测元素是否进入视口）

如果你想在元素进入视口时触发某些操作，可以使用 Intersection Observer API。

let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("元素进入视口");
            // 这里执行你的代码
        }
    });
}, {
    root: null, // 表示视口为根元素，也可以是其他元素，例如 document.querySelector('.some-element')
    threshold: 0.5 // 表示元素至少有50%在视口内时触发回调函数
});
 
observer.observe(document.querySelector('.some-element')); // 选择要观察的元素

6. 使用 defer 和 async 属性加载脚本

对于 <script> 标签，使用 defer 或 async 属性可以控制脚本的加载和执行时机。defer 会保持脚本的执行顺序，而 async 则不保证顺序。

<script src="script.js" defer></script> <!-- 或者使用 async -->

选择哪种方法取决于你的具体需求。例如，如果你需要确保所有的资源都加载完毕再执行某些操作，应该使用 window.onload 或 load 事件。如果你只需要在 DOM结构加载完毕后立即执行代码，那么 DOMContentLoaded 是更好的选择。对于动态内容或特定资源，可以使用资源特定的 load 事件或 Intersection Observer API。