图片懒加载

2025-03-23 分类：Other 作者：admin 阅读（27）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完善的图片懒加载示例</title>
    <style>
        /* 基础样式 */
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
            background: #f0f0f0; /* 默认背景色 */
            transition: opacity 0.3s; /* 淡入效果 */
        }
        .lazyload {
            opacity: 0; /* 初始隐藏图片 */
        }
        .lazyloaded {
            opacity: 1; /* 加载完成后显示图片 */
        }
        .error {
            background: #ffebee; /* 加载失败时的背景色 */
            color: #c62828; /* 错误提示文字颜色 */
            text-align: center;
            padding: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 图片 1：正常图片 -->
    <img
        data-src="https://via.placeholder.com/600x400" <!-- 目标图片 -->
        src="placeholder.jpg" <!-- 占位符图片 -->
        class="lazyload"
        alt="图片 1"
        data-error="fallback.jpg" <!-- 备用图片 -->
        onerror="handleImageError(this)" <!-- 加载失败时调用处理函数 -->
    >

    <!-- 图片 2：目标图片不存在，加载备用图片 -->
    <img
        data-src="non-existent-image.jpg" <!-- 不存在的目标图片 -->
        src="placeholder.jpg"
        class="lazyload"
        alt="图片 2"
        data-error="fallback.jpg"
        onerror="handleImageError(this)"
    >

    <!-- 图片 3：目标图片和备用图片都不存在，显示错误提示 -->
    <img
        data-src="non-existent-image.jpg"
        src="placeholder.jpg"
        class="lazyload"
        alt="图片 3"
        data-error="non-existent-fallback.jpg" <!-- 不存在的备用图片 -->
        onerror="handleImageError(this)"
    >

    <!-- 引入 Lazysizes -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>

    <!-- 加载失败处理逻辑 -->
    <script>
        /**
         * 处理图片加载失败
         * @param {HTMLImageElement} img - 加载失败的图片元素
         */
        function handleImageError(img) {
            // 如果备用图片存在，尝试加载备用图片
            if (img.dataset.error) {
                img.src = img.dataset.error; // 加载备用图片
                img.onerror = function () {
                    // 如果备用图片也加载失败，显示错误提示
                    showError(img);
                };
            } else {
                // 如果没有备用图片，直接显示错误提示
                showError(img);
            }
        }

        /**
         * 显示错误提示
         * @param {HTMLImageElement} img - 加载失败的图片元素
         */
        function showError(img) {
            img.classList.add("error"); // 添加错误样式
            img.alt = "图片加载失败"; // 设置错误提示文字
            img.src = ""; // 清空 src，避免显示占位符
            img.onerror = null; // 防止死循环
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>完善的图片懒加载示例</title>

<style>

/* 基础样式 */

img {

width: 100%;

height: auto;

display: block;

margin-bottom: 20px;

background: #f0f0f0; /* 默认背景色 */

transition: opacity 0.3s; /* 淡入效果 */

}

.lazyload {

opacity: 0; /* 初始隐藏图片 */

}

.lazyloaded {

opacity: 1; /* 加载完成后显示图片 */

}

.error {

background: #ffebee; /* 加载失败时的背景色 */

color: #c62828; /* 错误提示文字颜色 */

text-align: center;

padding: 20px;

font-size: 14px;

}

</style>

</head>

<body>

<img

data-src="https://via.placeholder.com/600x400"

src="placeholder.jpg"

class="lazyload"

alt="图片 1"

data-error="fallback.jpg"

onerror="handleImageError(this)"

<img

data-src="non-existent-image.jpg"

src="placeholder.jpg"

class="lazyload"

alt="图片 2"

data-error="fallback.jpg"

onerror="handleImageError(this)"

<img

data-src="non-existent-image.jpg"

src="placeholder.jpg"

class="lazyload"

alt="图片 3"

data-error="non-existent-fallback.jpg"

onerror="handleImageError(this)"

/**

* 处理图片加载失败

* @param {HTMLImageElement} img - 加载失败的图片元素

function handleImageError(img) {

// 如果备用图片存在，尝试加载备用图片

if (img.dataset.error) {

img.src = img.dataset.error; // 加载备用图片

img.onerror = function () {

// 如果备用图片也加载失败，显示错误提示

showError(img);

};

} else {

// 如果没有备用图片，直接显示错误提示

showError(img);

}

/**

* 显示错误提示

* @param {HTMLImageElement} img - 加载失败的图片元素

function showError(img) {

img.classList.add("error"); // 添加错误样式

img.alt = "图片加载失败"; // 设置错误提示文字

img.src = ""; // 清空 src，避免显示占位符

img.onerror = null; // 防止死循环

}

</script>

</body>

</html>

补充一个生成占位图：https://www.jyshare.com/front-end/9355/

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏

标签：

上一篇：golang r *http.Request 和 r *http.Response

下一篇：WEB-UI管理面板Cockpit(轻量简单)安装与使用

你可能感兴趣

mac brew 换源

共有 0 - 图片懒加载

点击这里取消回复。

博客简介

admin（6年前 (2020-03-09)）
分别用不同厚度的筏板定义，画图后这设置筏板变截面处理。 http://f.fwxgx.co...
评：新文章！
admin（6年前 (2020-03-09)）
分别用不同厚度的筏板定义，画图后这设置筏板变截面处理。 http://f.fwxgx.co...
评：新文章！
admin（6年前 (2020-03-09)）
新增一个框架图！ http://biji.jinli.vip/wp-content/upl...
评：新文章！
一位WordPress评论者（6年前 (2020-02-13)）
嗨，这是一条评论。要开始审核、编辑及删除评论，请访问仪表盘的“评论”页面。评论者头像来自...
评：世界，您好！

图片懒加载

你可能感兴趣

共有 0 - 图片懒加载

点击这里取消回复。

博客简介

最近更新

随机文章

热门标签

精彩评论