代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片加载组件</title>
</head>
<body>

<!-- 使用自定义的图片加载组件，传入图片URL列表 -->
<image-loader
    image-urls="
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-tBre.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-t2ma.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-Ogz9.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-qcsQ.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-T4UI.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-g5q3.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-0Qjz.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-XanS.webp,
        http://192.168.80.101:8080/upload/test/chun-2024-08-20-Ugkq.webp
    ">
</image-loader>

<script>
    // 定义自定义元素“image-loader”
    customElements.define(
        "image-loader",
        class ImageLoader extends HTMLElement {
            // 构造函数：初始化并渲染图片加载组件
            constructor() {
                super();
                this.attachShadow({ mode: "open" });
                this.render();
            }

            // 渲染函数：根据传入的图片URL列表，动态创建图片元素并应用样式
            render() {
                // 将传入的图片URL字符串按逗号分割成数组
                const imageUrls = this.getAttribute('image-urls').split(',');
                // 定义占位图URL
                const placeholderUrl = '/assets/img/photo_loading.gif';

                // 创建图片容器
                const container = document.createElement('div');
                container.classList.add('image-container');

                // 遍历图片URL数组，为每个URL创建图片包装和图片元素
                imageUrls.forEach(url => {
                    const imgWrapper = document.createElement('div');
                    imgWrapper.classList.add('image-wrapper');

                    const img = document.createElement('img');
                    img.src = placeholderUrl; // 初始占位图
                    img.alt = '占位图';

                    // 图片加载成功事件处理器：更换图片源并移除事件监听器
                    const onLoadHandler = () => {
                        img.src = url;
                        img.removeEventListener('load', onLoadHandler);
                    };

                    // 图片加载失败事件处理器：显示占位图并移除事件监听器
                    const onErrorHandler = () => {
                        img.src = placeholderUrl; // 加载失败显示占位图
                        img.removeEventListener('error', onErrorHandler);
                    };

                    // 监听图片的加载成功和失败事件
                    img.addEventListener('load', onLoadHandler);
                    img.addEventListener('error', onErrorHandler);

                    // 将图片元素添加到图片包装中，再将包装添加到容器中
                    imgWrapper.appendChild(img);
                    container.appendChild(imgWrapper);
                });

                // 创建并添加样式元素，为图片容器和图片包装定义样式
                const style = document.createElement('style');
                style.textContent = `
                    .image-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 0.5rem;
                        flex-direction: column;
                    }
                    .image-wrapper {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                    }
                    .image-wrapper img {
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: contain;
                    }
                `;

                // 将样式和容器添加到组件的shadow DOM中
                this.shadowRoot.appendChild(style);
                this.shadowRoot.appendChild(container);
            }
        }
    );
</script>

</body>
</html>
批量插入生成链接看这里批量生成链接
预览

看这里
后记

优劣

进入编辑器不会被加载，可以加快编辑，但无法预览图片。
问题

前端图片无法被放大预览。
目录CONTENT

图片加载组件

代码

预览

后记

优劣

问题

评论区
