给页面加上Loading效果最简单实用的办法

其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。

最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：

首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
<body>  <div id='loading'>正在加载</div>
你可以直接放到页面的<body>标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）

然后，在你的样式表中，对这个loading设定一个简单的样式：
#loading{z-index:1;padding:5px 0 5px 9px;background:#c44;left:0;top:0;width:90px;color:#fff;position:fixed}
接下来，在你<body>标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记：
  <script>document.write('<style>#loading{display:none}<\/style>');</script></body>
如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：
  <script>$('#loading').hide()</script></body>
这样，当页面完全加载完毕之后，loading就隐掉了。

对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。

最后，希望这个老土的技巧能帮到你：）

给页面加上Loading效果最简单实用的办法相关推荐

html显示滚动焦点图代码,商城常用滚动的焦点图效果代码简单实用
这种商城的效果网上很多,但大多是插件,要么JS写的太过于复杂,对于学习的童鞋来说看起来比较费劲,这个看起来比较简单,也比较容易理解,各位童鞋需要的请围观,也欢迎各位评价,贴代码(为方便使用,代码复制即 ...
java 实现loading效果_简单实现JS Loading功能
我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示.其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下. 1 ...
Vue怎样给页面加上切换效果、路由切换效果
一.需求我想写一个左右滑动样式的路由切换. 比如进入详情页的时候,向左滑动. 从详情页返回到主页的时候,向右滑动. 二.参考文档 1. vue-router文档基于路由的动态过渡 2. vue-t ...
C语言实现3D渐去文字效果！简单实用，源代码分享
原理把文本输出到 IMAGE 中,再使其在屏幕上滚动. 在文字向上滚动的同时,相应地压缩每行的像素,并且改变每行的亮度,就实现了 3D 效果. 效果源码 // // 编译环境:Visual Stu ...
ajax实现翻书效果,jQuery实现手机版页面翻页效果的简单实例
var page = 1; var size = 6; var mark = 0; var url = "{pigcms{:U('Order/index', array('page'=> ...
Atlas学习手记（15）：使用RoundedCorners为控件加上圆角效果
RoundedCorners是AtlasControlToolkit中的一个Extender,利用它可以轻松地为ASP.NET中的控件加上圆角效果. 主要内容 1．RoundedCorners介绍 2 ...
html美化select样式,select样式美化（简单实用）
美化select,可以实用一个a标签将select嵌套进去,然后将相对定位,在将select绝对定位,美化即可 .sel_mask{ /*将相对定位*/ position:relative; widt ...
html+css+小图标,HTML+CSS入门一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...

给页面加上Loading效果最简单实用的办法

给页面加上Loading效果最简单实用的办法相关推荐

最新文章

热门文章