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

虽然现在的GMail已经看不到这个效果,但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中:

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

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

首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,比如loading:

<body>
  
正在加载

你可以直接放到页面的<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>标记:

  document.write('#loading{display:none}');
</body>

如果你有jQuery之类的JavaScript库,就更方便了,例如jQuery可以使用:

  $('#loading').hide()
</body>

这样,当页面完全加载完毕之后,loading就隐掉了。

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

最后,希望这个老土的技巧能帮到你:)

[技术]原创-完美的loading-完美到底[减负]

V2,也爱,也恨!这里介绍关于含有V2组件项目的loading问题
转载请注明原帖:http://www.awflasher.com/blog/archives/468

V2组件自面世以来就颇受争议,大体概括如下:

优点:
·界面比V1组件更加美观、统一,人机交互模式更加完善
·均采用面向对象脚本部署

缺点
·体积笨重,开发一些只用到一两个组件的小应用程序时很尴尬

消息机制方面使用EventDispather的消息广播机制,取代原有的AsBroadcast机制。使得刚出来的时候很多人根本不会用。

这里就不讨论更多了,先说loading。含有大量v2组件的产品要想见人肯定是不能不作loading的,比如aw’s blog左边的那个blog小贴士。然而每次在loading的时候似乎都会遇到麻烦。那就是笨重的体积全部被放到第一帧导出了,这样导致对一些300k以内的,含有v2组件的SWF文件进行远程载入的loading效果变得捉襟见肘

解决的办法也不是没有,简单概括为三个步骤:

一、去掉“Export in first frame”
V2-Component-Loading

二、在发布的时候设置一下“Export frame for classes”,这一点非常重要!
V2-Component-Loading

三、对于外埠读取的含有V2的swf文件,将容器mc进行如下设置:

loader_mc._lockroot = true;

好了,现在放心享受精彩而笨重的V2组件吧~!

aw补充一点:最近在开 Continue reading “[技术]原创-完美的loading-完美到底[减负]”

[技术]原创-完美的loading-完美到底[利器]

参考英文教程,并作出大量原创补充 – Neil Webb, neil AT nwebb DOT co DOT uk, http://www.nwebb.co.uk
转载请注明原帖:http://www.awflasher.com/blog/archives/468

2006年12月19日的一个小补充:关于onLoadInit与onLoadComplete的细节对比(文末)

读取外埠数据参与Flash应用程序部署是一件非常重要和常见的工作,尤其是我们常常需要检测这些数据加载的进度。传统的做法是采用loadMovie的方法,不过这种方法需要对被载入的外埠资源进行太多的预先性操作,当外埠资源不可知或者不是swf文件时,loadMovie显得无能为力。而MovieClipLoader(下称MCL)类却帮我们大大简化了这项麻烦工作。此外,它使得我们能获取更多的需要,并减少代码量。我们可以用一个单独的MCL类来载入一个,或者多个外埠资源到指定的MC或者层级,或者我们可以为每一个加载工作制定不同的MCL实例。

我决定分两部分来完成这篇教程。首先,我们将介绍MCL的基本用法;然后我们将介绍如何使用一个单独的MCL实例来读取外埠资源到不同的MC,并且,我们将加入侦听器对象来参与工作。当然,不通过侦听器也可以完成任务,我们暂时不介绍侦听器,因为这样你会更加容易理解MCL。

那么,我们首先来大体了解一下MCL有哪些回调函数,后面也会有详细介绍(aw附:回调函数我个人理解就是某一个类组、参数事先确定,拥有指定功效的方法;再详细点说,从字面上看,所谓回调,就是指先定义好,等某些时刻需要的时候,回过头来调用。也就是特定的事件触发函数)这里可以了解一下什么叫做回调函数):
Continue reading “[技术]原创-完美的loading-完美到底[利器]”

[技术]原创-完美的loading-完美到底[基础]

很久没有发技术日志了,要来就来个完美的。您别激动,一个小小的loading谈什么完美,我想你看了就知道^_^
我的口号,将此文打造成全球最完善的非Flash初学者loading教程贴。转载请保留原文地址:
http://www.awflasher.com/blog/archives/444

首先,想说一下我写此文的动机。记得很早之前我曾经说过“没有loading的flash,不是完整的flash”。我想那个句话可能偏激了。因为有时候一些不到10k的flash,确实不需要做什么loading。但我始终认为,做一个优秀的loading是衡量一个flasher水准,甚至态度的。你问我为什么,我可以告诉你,因为loading是唯一一个你不会多看而所有用户、客户会看的东西,所以你对loading的重视程度,甚至可以反衬你这个flasher的职业道德!

有些做设计为主的朋友,我认识不少,他们对loading都是得过且过的态度,做一个loading,更多的是自己找一个现成的,然后每次去套用,我个人认为是很不好的习惯。并不是说我不提倡代码、元件的重用度,而是我觉得对于loading这种东西,套多了,是要出问题的。我强烈建议那些已经达到可以修改人家loading水平的flasher看看我的东西,当然,如果你连flash的as该写在哪都不知道,建议先入门了。

好,下面切入正题,如何制作loading。

首先要感激Macromedia的大智慧,提供了很好的两个函数使我们可以做出完美的loading,那就是getBytesLoaded和getBytesTotal。请不要再用你改来改去改了两三年的那个什么getFrameLoaded什么什么了,我都记不清楚怎么拼了。我只想说, Continue reading “[技术]原创-完美的loading-完美到底[基础]”

[原创]Loading特效

很久没有玩Flash了……前段时间做的那个项目别提了,要不是8里面那点新东西和老爸经济确实困难,我打死也不会再找那种项目作了。
近日自习英语和数学,发现这两门强项功力大减,唉!果然岁月不饶人啊!不过自习的感觉挺不错的,很久没有这么静了……当然每天自习到十点半还是有点憋……近日做了一个一直想做的效果。

言归正传,这是一个一个Loading特效。很久以前某国外网站做过,当时我还不知道怎么做,现在一帧代码搞定,希望对大家有用,新手学习,高手批评。

例子(要使用的话,请著名出处 http://www.awflasher.com )

注意:如果您的网速太快的话,是看不到这个loading效果的。其实,loading本身也是给慢速的网友一个打法时间的机会,让他们等待内容出现,内容当然比loading更加重要了。
很多朋友反映看不到效果,我抓了张图给各位看:)

此外,感谢矩阵棉花的提醒,很多朋友看不到效果是因为直接点开了SWF。大家只要点击“点此 显示/隐藏 媒体”就可以了

attachments/200509/21_170703_pl.gif

stop();
import mx.transitions.easing.*;
import mx.transitions.TweenExtended;
//
loadThis();
function loadThis() {
  target = this;
  i = setInterval(doLoad, 20);

Continue reading “[原创]Loading特效”