CSS缩略图画廊：如何替换初始提示文本为首张图片

嘿，这个问题很好解决！要让页面一加载就直接显示画廊的首张完整尺寸图片，换掉那个默认的提示文本，你可以按下面的步骤来操作：

1. 移除初始提示文本的CSS样式 #

首先，你需要删掉原来用来显示提示的:before伪元素代码——既然我们要直接显示图片，这个提示就不需要啦：

/* 请删除或注释掉这段代码 */
dl.container:before { 
    content: "Hover a thumbnail"; 
    position: absolute; 
    font: 48px Tahoma; 
    display: block; 
    top: 150px; 
    color: #d8d8d8; 
    text-shadow: 1px 1px 3px #666; 
    width: 100%; 
    text-align: center;
}

2. 页面加载时自动触发首张图片的显示 #

接下来，我们用JavaScript在页面DOM加载完成后，主动触发首张缩略图的加载逻辑。这里提供两种方案，你可以根据自己的代码结构选择：

方案一：模拟hover/点击事件（贴合原逻辑） #

如果原画廊是通过hover或点击缩略图来触发大图加载的，我们可以直接模拟这个事件，让页面加载时自动执行：

// 等待页面DOM完全加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取页面中的首张缩略图元素（请根据你的实际DOM结构调整选择器）
    const firstThumbnail = document.querySelector('dl.container dd:first-child img');
    
    if (firstThumbnail) {
        // 模拟鼠标hover事件（如果原逻辑是hover触发）
        const hoverEvent = new MouseEvent('mouseover', {
            bubbles: true,
            cancelable: true,
            view: window
        });
        firstThumbnail.dispatchEvent(hoverEvent);
        
        // 如果原逻辑是点击触发，就换成下面这行代码
        // firstThumbnail.click();
    }
});

方案二：直接设置大图容器内容（更高效） #

如果你的代码里有专门的大图显示容器（比如<dt>标签里的图片元素），可以直接把首张图片的完整URL赋值给它，一步到位：

document.addEventListener('DOMContentLoaded', function() {
    // 获取首张缩略图和大图容器（请根据实际结构调整选择器）
    const firstThumbnail = document.querySelector('dl.container dd:first-child img');
    const largeImgContainer = document.querySelector('dl.container dt img');
    
    if (firstThumbnail && largeImgContainer) {
        // 假设缩略图用data-full属性存储完整尺寸图片的URL
        largeImgContainer.src = firstThumbnail.dataset.full;
        largeImgContainer.alt = firstThumbnail.alt; // 同步alt文本，优化 accessibility
    }
});

小提示 #

• 记得根据你实际的DOM结构调整代码中的选择器哦，比如如果缩略图不是放在<dd>里，要改成对应的标签或类选择器。
• 如果原代码里有封装好的加载大图的函数，直接调用那个函数并传入首张图片的参数会更贴合原逻辑~

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