给你的博客载入过程添加“正在努力载入中…”效果

2012.09.23 分享 16774 人浏览 2 条留言

今天跟大家分享一个博客常用的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/blog-loading/

“给你的博客载入过程添加“正在努力载入中…”效果” 有 2 条评论

  1. blogfeng说道:

    wordpress可以吗?为什么不成功呢

记忆碎片进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif