记忆碎片-网络技术分享

今天跟大家分享一个博客常用的js效果，就是在打开文章载入过程中，用自定义的文字内容提醒用户文章正在载入，获得更加的用户体验。

效果如下图

下面就是教程了，首先先看下你的标题div结构(老鸟直接无事吧)，打开你的网站源码（或者chrome下直接右键审查元素）找到你的标题部分。

为使大家更容易理解，下面用两个不同的例子讲解下。

例一：我的点点随机文章输出方法这篇文章为例子，其源码中的结构如下

<h2 class="post_title">
<a href="https://huilang.me/dd-random/">点点随机文章的输出方法
</a>
</h2>

即h2 a下面的内容，记住这个h2 a，下面会用到这个。

例二：以我另一个站的文章世界各国生物仿制药法规概况 美中迎重大进展为例，其源码如下。

<h4 class="post-title">
<a href="http://swjs.cn/world-swzy-fg">世界各国生物仿制药法规概况 美中迎重大进展</a>
</h4>

看出来了吧，这里就是"h4 a"咯！

 

知道你的标题结构之后，下面就是加载的js内容了。

<script type="text/javascript">
$(document).ready(function() {
$('h2 a').click(function(){
myloadoriginal = this.text;
$(this).text('正在努力载入中 …');
var myload = this;
setTimeout(function() { $(myload).text(myloadoriginal); }, 2011);
});
});
</script>

把上面的js放在body之内，其中第三行的'h2 a'即为上面提到的标题结构了，主要这个js判断到你的网站出现h2 a这个结构的地方，在载入过程中便会加载地5行的“正在努力载入中...”这段文字，当然这里可以自定义为你喜欢的内容，如“我要一步一步往上爬...”。

具体效果可以参考本站“记忆碎片”

PS:发布了一个加强版，有兴趣可以去看下给你的标题载入中添加动态效果，就是添加了动态效果

发布于记忆碎片-网络技术分享 https://huilang.me

文章地址：https://huilang.me/blog-loading/