页面加载后图片加载屏：点击加载外部画廊时新增加载屏需求

嘿，我明白你的需求啦——已经有了页面加载完成后自动淡出的加载屏，现在要给通过jQuery加载的外部画廊加个点击触发的加载屏，对吧？下面咱们一步步来实现：

1. 先准备好画廊专属的加载屏元素 #

如果你之前的加载屏是给页面初始加载用的，建议单独整个新的（或者给原有加载屏加个专属类），避免冲突：

<!-- 可以放在页面底部或者和初始加载屏同位置 -->
<div class="loader gallery-loader">正在加载画廊...</div>

2. 调整CSS，让加载屏默认藏起来，需要时再显示 #

咱们给加载屏加个过渡动画，显示隐藏更丝滑：

/* 基础加载屏样式，你可以复用你原有加载屏的样式，这里补全关键属性 */
.loader {
  position: fixed;
  z-index: 9999; /* 确保在最上层 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  /* 默认隐藏 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 激活加载屏的类，点击时添加这个类 */
.loader.active {
  opacity: 1;
  visibility: visible;
}

3. 修改jQuery代码，控制加载屏的显示和隐藏 #

假设你是点击某个按钮（比如#load-gallery-link）来加载外部画廊HTML到#gallery-wrapper容器里，代码这么写：

$(document).ready(function() {
  // 你的原有逻辑：页面加载完成后淡出初始加载屏
  $('.initial-loader').fadeOut(600);

  // 监听画廊加载按钮的点击事件
  $('#load-gallery-link').on('click', function(e) {
    e.preventDefault(); // 阻止默认的链接跳转行为

    // 先显示画廊加载屏
    $('.gallery-loader').addClass('active');

    // 加载外部画廊HTML
    $('#gallery-wrapper').load('你的画廊页面路径.html', function(response, status) {
      // 不管加载成功还是失败，都隐藏加载屏
      $('.gallery-loader').removeClass('active');
      
      // 可选：如果加载失败，给用户提示
      if (status === 'error') {
        alert('画廊加载失败啦，试试刷新页面？');
      }
    });
  });
});

几个小提醒 #

• 如果不想单独做新的加载屏，也可以复用原有加载屏，只要在页面加载完成后把它设置为隐藏（比如$('.loader').hide()或者移除active类），点击时再重新显示就行
• 一定要把加载屏的z-index设高一点，确保不会被其他内容挡住
• load()方法的回调函数是关键，只有等外部HTML完全加载完成后，再隐藏加载屏，用户才不会看到内容突然蹦出来

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