帖子列表loading svg

admin · 发表于 2020-7-7 09:30:31

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

<div class="Card"><div class="PlaceHolder List-item"><div class="PlaceHolder-inner"><div class="PlaceHolder-bg"></div><svg width="834" height="50" viewBox="0 0 834 50" class="PlaceHolder-mask"><title></title><g><path d="M-0.5,0h835v50h-835V0z M61,0h350v19.4H61V0z M61.1,29.6h238V50h-238V29.6z M50,50H0V0h50V50z M834,50H641V25h193V50z" fill="#FFF" fill-rule="evenodd"></path></g></svg></div></div></div>

复制代码

多：

<div class="Card"><div class="PlaceHolder List-item"><div class="PlaceHolder-inner"><div class="PlaceHolder-bg"></div><svg width="834" height="108" viewBox="0 0 834 108" class="PlaceHolder-mask"><title></title><g><path d="M0 0h656v108H0V0zm0 0h350v12H0V0zm20 32h238v12H20V32zM0 32h12v12H0V32zm0 32h540v12H0V64zm0 32h470v12H0V96z" fill="#FFF" fill-rule="evenodd"></path></g></svg></div></div></div>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-17 05:49:23

在Discuz!中，如果你想在帖子列表页面添加一个加载中的SVG动画，可以通过以下步骤实现：

### 1. 准备SVG文件
首先，你需要准备一个SVG格式的加载动画。你可以使用在线工具生成SVG加载动画，或者自己设计一个。将SVG文件保存到你的Discuz!模板目录中，例如 `template/default/common/loading.svg`。

### 2. 修改模板文件
找到帖子列表页面的模板文件，通常是 `template/default/forum/forumdisplay_list.htm`。在这个文件中，找到你想要显示加载动画的位置。

### 3. 添加SVG加载动画
在适当的位置插入以下代码：

<div id="loading" style="display:none;">
<img src="{STATICURL}template/default/common/loading.svg" alt="Loading..." />
</div>

复制代码

### 4. 使用JavaScript控制显示和隐藏
你可以在页面加载时显示SVG动画，并在数据加载完成后隐藏它。在 `template/default/forum/forumdisplay_list.htm` 文件的底部添加以下JavaScript代码：

<script type="text/javascript">
// 显示加载动画
function showLoading() {
document.getElementById('loading').style.display = 'block';
}
// 隐藏加载动画
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
// 模拟数据加载
function loadData() {
showLoading();
setTimeout(function() {
// 这里可以是你加载数据的逻辑
hideLoading();
}, 2000); // 2秒后隐藏加载动画
}
// 页面加载完成后执行
window.onload = function() {
loadData();
};
</script>

复制代码

### 5. 样式调整
你可以通过CSS来调整加载动画的位置和大小。在 `template/default/common/common.css` 中添加以下样式：

#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
#loading img {
width: 50px;
height: 50px;
}

复制代码

### 6. 测试
保存所有修改后，刷新你的Discuz!论坛页面，查看帖子列表页面是否在加载数据时显示了SVG加载动画。

### 7. 进一步优化
如果你希望在Ajax请求时显示加载动画，可以在Ajax请求开始和结束时分别调用 `showLoading()` 和 `hideLoading()` 函数。