【Typecho】joe主题添加懒加载动效

前几天我网站出现白屏，就想着让ai帮我写一个懒加载的动画代码，不需要下载任何动画图片， html+css+js 组成，下面跟我一起操作吧！

图片展示

只要加载都是显示以上这个页面，加载时间为2秒！可以在代码中设置的，可以1秒，3秒...

效果实现

document.addEventListener("DOMContentLoaded", function() {
    var loadingWrapper = document.getElementById('loading-wrapper');
    setTimeout(function() {
        loadingWrapper.style.display = 'none';
    }, 2000); // 2秒后隐藏加载动画和遮罩
});

自定义css代码

以上图为例，我们将css代码引入在自定义head里面，代码如下：

<link rel="stylesheet" href="https://cdn.nmssb.cn/loading.css">

大家可以自己访问链接下载css代码进行自己存放，为了节省服务器存储的话可以直接使用我的，复制以上代码到joe主题后台里面的自定义head里面就行。

html-DIV标签放置

这是最后一步，放置完成后保存主题设置即可！快去试试吧！（关注公众号：笔记堡 即可获取验证码）

<!-- 加载动画和遮罩开始 -->
<div id="loading-wrapper">
    <div class="loader">
        <div class="loader-inner">
            <div class="loader-circle"></div>
        </div>
    </div>
</div>
<!-- 加载动画和遮罩结束 -->

总结

通过ai生成的代码即可实现加载时显示懒加载了，不用下载任何动图，纯html和css、js代码实现！最关键的是无需设置源站文件内容，防止出错，大家快去试试吧！