当用户访问一个网页时，如果图片较大或网络较慢，可能会导致页面显示不流畅。因此，提供一个 Loading 效果是一个很好的用户体验展示
创建基本的 HTML 结构
我们首先需要一个简单的 HTML 结构，包含一个用于显示图片的 img 标签和一个用于显示 Loading 的 div。
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Loading Example</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入 CSS 样式 --></head><body>
<div id="loading">加载中...</div> <!-- Loading 层 -->
<img id="myImage" src="path/to/your/image.jpg" alt="图片描述"> <!-- 图片 -->
<script src="script.js"></script> <!-- 引入 JavaScript 文件 --></body></html>
添加 CSS 样式
接着，我们为 Loading 效果和图片添加一些基础的 CSS 样式。
/* styles.css */body {
font-family: Arial, sans-serif;}#loading {
display: flex; /* 使用 Flexbox 居中元素 */
justify-content: center;
align-items: center;
height: 100vh; /* 使 Loading 层全屏显示 */
font-size: 24px; /* 字体大小 */
background-color: rgba(255, 255, 255, 0.8); /* 背景色 */
position: fixed; /* 固定在页面上 */
width: 100%; /* 全宽 */
top: 0; /* 从顶部开始 */}img {
display: none; /* 初始时隐藏图片 */
max-width: 100%; /* 图片自适应 */}
编写 JavaScript 代码
最后，我们需要编写 JavaScript 代码，来控制 Loading 信息的显示与隐藏。
// script.jsconst loadingDiv = document.getElementById('loading'); // 获取 Loading 元素const img = document.getElementById('myImage'); // 获取图片元素// 当图片正在加载时img.onload = function() {
loadingDiv.style.display = 'none'; // 图片加载完成，隐藏 Loading
img.style.display = 'block'; // 显示图片};// 当图片开始加载时img.onerror = function() {
loadingDiv.innerHTML = '图片加载失败'; // 处理加载失败情况};// 页面加载时，保持 Loading 显示img.src = img.src; // 触发图片加载