页面加载时显示带关联文本标题的随机图片（无需body onload）

Got it！咱们完全可以摆脱body标签上的onload属性，用几种更清爽的方式实现页面加载时随机展示图片和标题的功能。我给你整理了几个实用方案：

方案1：使用DOMContentLoaded事件 #

这个事件会在浏览器构建完DOM树后立即触发（不需要等图片、样式表这类外部资源加载完成），非常适合咱们的场景——毕竟咱们只需要操作DOM元素来展示内容。

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        // 准备你的图片与标题数据
        const imageData = [
            { src: 'image1.jpg', title: '春日花海' },
            { src: 'image2.jpg', title: '夏日海滩' },
            { src: 'image3.jpg', title: '秋日枫林' }
        ];

        // 监听DOM加载完成事件
        document.addEventListener('DOMContentLoaded', function() {
            // 随机挑选一个数据项
            const randomIndex = Math.floor(Math.random() * imageData.length);
            const selectedItem = imageData[randomIndex];

            // 获取页面上的图片和标题容器（需要提前在body里定义好对应元素）
            const imgElement = document.getElementById('random-image');
            const titleElement = document.getElementById('image-title');

            // 设置图片和标题内容
            imgElement.src = selectedItem.src;
            titleElement.textContent = selectedItem.title;
        });
    </script>
</head>
<body>
    <img id="random-image" alt="随机展示图片">
    <h2 id="image-title"></h2>
</body>
</html>

这种方式不需要修改body标签的任何属性，而且触发时机早，用户能更快看到内容。

方案2：把script标签放在body末尾 #

这是个更简洁的小技巧——当浏览器解析到body末尾的script时，前面所有的DOM元素都已经加载完毕了，所以直接写执行代码就行，完全不需要事件监听。

<html>
<head>
    <title>Test</title>
</head>
<body>
    <img id="random-image" alt="随机展示图片">
    <h2 id="image-title"></h2>

    <script type="text/javascript">
        const imageData = [
            { src: 'image1.jpg', title: '春日花海' },
            { src: 'image2.jpg', title: '夏日海滩' },
            { src: 'image3.jpg', title: '秋日枫林' }
        ];

        // 直接执行逻辑，此时DOM已经就绪
        const randomIndex = Math.floor(Math.random() * imageData.length);
        const selectedItem = imageData[randomIndex];

        const imgElement = document.getElementById('random-image');
        const titleElement = document.getElementById('image-title');

        imgElement.src = selectedItem.src;
        titleElement.textContent = selectedItem.title;
    </script>
</body>
</html>

这个方案兼容性拉满，所有浏览器都支持，代码也更清爽，适合简单场景。

方案3：使用window.onload（备选方案） #

这个方法和body上的onload效果类似，但代码写在script里，不用修改body标签。不过它会等所有外部资源（图片、样式、脚本）都加载完成后才触发，时机比DOMContentLoaded晚一些，适合需要依赖资源加载完成的场景（比如要获取图片尺寸）。

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        const imageData = [
            { src: 'image1.jpg', title: '春日花海' },
            { src: 'image2.jpg', title: '夏日海滩' },
            { src: 'image3.jpg', title: '秋日枫林' }
        ];

        window.onload = function() {
            const randomIndex = Math.floor(Math.random() * imageData.length);
            const selectedItem = imageData[randomIndex];

            const imgElement = document.getElementById('random-image');
            const titleElement = document.getElementById('image-title');

            imgElement.src = selectedItem.src;
            titleElement.textContent = selectedItem.title;
        };
    </script>
</head>
<body>
    <img id="random-image" alt="随机展示图片">
    <h2 id="image-title"></h2>
</body>
</html>

总结 #

如果只是展示图片和标题，优先选方案1或者方案2——方案1灵活度更高，方案2更简洁直观，都能完美解决你不想修改body标签的需求～

内容的提问来源于stack exchange，提问作者Drako Fajro Koro