如何用jQuery创建HTML代码块？优化Fancybox的Overlay实现方案

一、Overlay结构分离到PHP局部文件 #

把Overlay的HTML从JS里抽离，放到单独的PHP局部文件（比如partials/overlay.php），实现结构与逻辑分离，维护更直观：

<!-- partials/overlay.php -->
<div id="overlay" style="display: none;">
    <div class="overlay__left-arrow-block">
        <span class="overlay__left-arrow"></span>
    </div>
    <div id="top-margin"></div>
    <div class="overlay__img-wrapper">
        <img class="loading-img" src="/bazar/assets/img/icons/circle.svg" style="display: none;">
        <img class="lightbox__img" style="display: none;">
    </div>
    <div class="overlay__bottom-slider"></div>
    <div class="overlay__right-arrow-block">
        <span class="overlay__right-arrow"></span>
    </div>
    <div class="overlay__close-btn">Zavrieť</div>
</div>

在页面模板中引入该局部文件：

<?php include 'partials/overlay.php'; ?>

这样JS无需动态创建Overlay，直接获取DOM元素即可，避免了JS中拼接大量HTML字符串的繁琐问题。

二、代码规范与性能优化 #

针对原代码的冗余与不规范问题，优化后的JS代码如下：

;(function($) {
    'use strict';

    // 缓存DOM元素，避免重复查询
    var $overlay = $('#overlay'),
        $gallery = $('.item-detail__gallery'),
        $galleryImgs = $gallery.find('img'),
        $galleryLinks = $gallery.find('a'),
        $imgWrapper = $overlay.find('.overlay__img-wrapper'),
        $lightboxImg = $imgWrapper.find('.lightbox__img'),
        $loadingImg = $imgWrapper.find('.loading-img'),
        $thumbSlider = $overlay.find('.overlay__bottom-slider');

    // 初始化缩略图（仅执行一次）
    function initThumbnails() {
        $thumbSlider.empty();
        $galleryImgs.each(function() {
            var $img = $(this),
                src = $img.attr('src'),
                href = $img.parent().attr('href'),
                $thumbWrapper = $('<a>', {
                    'class': 'overlay__img-thumb-wrapper', // 替换重复ID为class，符合HTML规范
                    'href': href
                }),
                $thumbImg = $('<img>', {
                    'class': 'lightbox__img-thumb',
                    'src': src
                });

            $thumbWrapper.append($thumbImg).appendTo($thumbSlider);
        });
    }

    // 显示指定图片
    function showImage(href) {
        // 切换加载状态
        $loadingImg.show();
        $lightboxImg.hide();

        // 加载主图，完成后切换显示
        $lightboxImg.attr('src', href).on('load', function() {
            $loadingImg.hide();
            $lightboxImg.show();

            // 标记当前激活的缩略图
            $thumbSlider.find('.overlay__img-thumb-wrapper').removeClass('img-active')
                .filter(function() {
                    return $(this).attr('href').split('/').pop() === href.split('/').pop();
                }).addClass('img-active');
        });
    }

    // 初始化流程
    initThumbnails();

    // 画廊点击事件
    $galleryLinks.on('click', function(e) {
        e.preventDefault();
        var href = $(this).attr('href');

        $overlay.show();
        showImage(href);
    });

    // 关闭按钮事件
    $overlay.find('.overlay__close-btn').on('click', function() {
        $overlay.hide();
    });

    // 缩略图点击事件（事件委托，支持动态元素）
    $thumbSlider.on('click', '.overlay__img-thumb-wrapper', function(e) {
        e.preventDefault();
        showImage($(this).attr('href'));
    });

})(jQuery);

核心优化点： #

• 结构解耦：Overlay的HTML脱离JS，由PHP局部文件管理，结构修改更便捷。
• DOM缓存：提前缓存所有需要操作的元素，避免重复查询DOM，提升性能。
• 避免重复创建：缩略图仅初始化一次，图片元素提前嵌入DOM，通过修改src和显示状态实现切换，减少DOM操作开销。
• 修正规范问题：将循环生成的重复ID改为class，符合HTML唯一性要求。
• 模块化拆分：把初始化、图片显示等逻辑拆分为独立函数，代码可读性与可维护性提升。
• 事件委托：缩略图点击采用事件委托，适配动态生成的元素。
• 全局隔离：用自执行函数包裹代码，避免污染全局作用域。

三、动态加载Overlay的补充方案 #

如果需要按需加载Overlay（比如页面初始不需要该结构），可以通过AJAX请求PHP局部文件：

$galleryLinks.on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');

    // 首次点击时加载Overlay
    if (!$overlay.length) {
        $.get('partials/overlay.php', function(html) {
            $('body').append(html);
            $overlay = $('#overlay');
            // 重新缓存元素并初始化
            $imgWrapper = $overlay.find('.overlay__img-wrapper');
            $lightboxImg = $imgWrapper.find('.lightbox__img');
            $loadingImg = $imgWrapper.find('.loading-img');
            $thumbSlider = $overlay.find('.overlay__bottom-slider');
            
            initThumbnails();
            showImage(href);
            $overlay.show();
        });
    } else {
        $overlay.show();
        showImage(href);
    }
});

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