鼠标悬停时加载data-src媒体到目标容器的技术问题咨询

问题一：按需创建媒体标签并区分图片/视频 #

预先放置空标签的方案扩展性差，按需创建标签是更合理的选择。可以通过资源路径的后缀快速判断媒体类型，动态生成对应的img或video元素：

修改后的完整代码 #

HTML

<div class="carousel">
  <div class="carousel-bg">
    <div class="loading">加载中...</div>
  </div>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" data-src="https://images.pexels.com/photos/2387418/pexels-photo-2387418.jpeg">
        Slide 1 (img)
      </div>
      <div class="swiper-slide" data-src="https://www.w3schools.com/html/mov_bbb.mp4">
        Slide 2 (vid)
      </div>
      <div class="swiper-slide" data-src="https://images.pexels.com/photos/356807/pexels-photo-356807.jpeg">
        Slide 3 (img)
      </div>
    </div>
  </div>
</div>

CSS

/* 媒体容器与加载状态 */
.carousel-bg {
  background: #ccc;
  height: 300px;
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
  /* 可替换为GIF加载图：background: url(加载图路径) center/cover no-repeat; */
}

.carousel-bg img,
.carousel-bg video {
  display: none;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-bg img.active,
.carousel-bg video.active {
  display: block;
  opacity: 1;
}

/* 幻灯片样式 */
.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  background: #eee;
  margin-right: 10px;
  padding: 20px;
  cursor: pointer;
}

JavaScript

const bgContainer = document.querySelector('.carousel-bg');
const loadingEl = bgContainer.querySelector('.loading');

// 判断资源类型：图片/视频
function getMediaType(src) {
  const imgExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
  const ext = src.split('.').pop().toLowerCase();
  return imgExtensions.includes(ext) ? 'image' : 'video';
}

// 清空当前媒体
function clearCurrentMedia() {
  const currentMedia = bgContainer.querySelector('img, video');
  if (currentMedia) {
    currentMedia.remove();
  }
  loadingEl.style.display = 'block';
}

// 创建并加载媒体
function loadMedia(src) {
  clearCurrentMedia();
  const mediaType = getMediaType(src);
  let mediaEl;

  if (mediaType === 'image') {
    mediaEl = document.createElement('img');
    mediaEl.src = src;
    mediaEl.onload = () => {
      loadingEl.style.display = 'none';
      mediaEl.classList.add('active');
    };
  } else {
    mediaEl = document.createElement('video');
    mediaEl.src = src;
    mediaEl.autoplay = true;
    mediaEl.muted = true;
    mediaEl.loop = true;
    mediaEl.oncanplay = () => {
      loadingEl.style.display = 'none';
      mediaEl.classList.add('active');
    };
  }

  bgContainer.appendChild(mediaEl);
}

// 绑定幻灯片鼠标事件
document.querySelectorAll('.swiper-slide').forEach(item => {
  item.addEventListener('mouseover', () => {
    const src = item.dataset.src;
    if (src) loadMedia(src);
  });

  item.addEventListener('mouseout', clearCurrentMedia);
});

关键说明 #

1. 动态创建标签：鼠标悬停时根据资源后缀判断类型，生成对应的img或video元素，避免预先冗余标签。
2. 事件绑定优化：用addEventListener替代onmouseover/onmouseout，支持多事件绑定，更灵活。
3. 资源清理：鼠标移出时移除当前媒体元素，避免内存占用和资源继续加载。

问题二：媒体加载完成后淡入+加载提示 #

上面的代码已经整合了加载状态和淡入效果：

• 加载时显示loading元素（可替换为GIF图，修改.loading的background属性即可）。
• 监听图片的onload事件、视频的oncanplay事件，加载完成后隐藏加载提示，给媒体元素添加active类触发淡入过渡。
• CSS中通过transition: opacity 0.3s ease实现平滑淡入效果。

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