preloader 美化

loader  主体:

package  com.dihtech.regionalhealth.healthrecord.personalhealthrecord.compoments

{

import flash.display.Sprite;   

import flash.events.Event;   

import flash.events.ProgressEvent;   

import flash.events.TimerEvent;   

import flash.text.TextField;   

import flash.utils.Timer;   

import mx.events.FlexEvent;   

import mx.preloaders.DownloadProgressBar;   

public class Preloader extends DownloadProgressBar   

{   

//显示进度的文字   

private var progressText:TextField;   

//进度条   

public var img:WelcomeScreen;   

//logo页面   

public var logo:WelcomeLogo;   

private var _timer:Timer;   

public function Preloader()   

{   

super();   

//加入logo   

logo = new WelcomeLogo();   

logo.x=100;

this.addChild(logo);   

//加入进度条   

img = new WelcomeScreen();   

this.addChild(img);   

//加入进度文字   

progressText = new TextField();   

progressText.x = 40;   

progressText.y = 90;   

this.addChild(progressText);   

//进度条计时器初始化,我们实现进度条的原理就是不停的刷新进图条图片   

//因为每次进度条的长度不同,所以就有进度条在走的效果   

_timer = new Timer(1);   

_timer.addEventListener(TimerEvent.TIMER, drawTimerHandler);   

_timer.start();   

}   

/**  

* override这个函数,来实现自己Preloader的设置,而不是用其默认的设置  

*/  

override public function set preloader(value:Sprite):void  

{   

value.addEventListener(ProgressEvent.PROGRESS, progHandler);   

value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler1);   

//在这里设置预载界面居中   

//如果在初始化函数中设置,会有stageWidth和最终界面大小不一致的错误,而导致不能居中   

x = (stageWidth/2) - (300/2);   

y = (stageHeight/2) - (180/2);   

}   

private function progHandler(e:ProgressEvent):void  

{   

//计算进度,并且设置文字进度和进度条的进度。   

var prog:Number = e.bytesLoaded/e.bytesTotal*100;   

progressText.text = "已下载 " + String(int(prog)) + "%";   

if(img)   

{   

img.progress = prog;   

}   

}   

private function compHandler(e:Event):void  

{   

}   

public   function initCompleteHandler1(e:FlexEvent):void  

{   

//如果载入完毕,则停止刷新   

img.ready = true;   

_timer.stop();   

//测试专用。下载完毕后,不马上跳到程序的默认界面。而是停顿10秒后再跳入。   

// var timer:Timer = new Timer(10000, 1);   

// timer.addEventListener(TimerEvent.TIMER, dispatchComplete);   

// timer.start();   

this.dispatchEvent(new Event(Event.COMPLETE));  

}   

private function initProgHandler(e:FlexEvent):void  

{   

}   

/**  

* 一定要分发这个事件,来通知程序已经完全下载,可以进入程序的默认界面了  

*/  

private function dispatchComplete(event:TimerEvent):void  

{   

this.dispatchEvent(new Event(Event.COMPLETE));   

}   

/**  

* 每个时钟周期都刷新进度条图片  

*/  

private function drawTimerHandler(event:TimerEvent):void  

{   

img.refresh();   

}   

}   

 

}

 

 

picture  logo:

package com.dihtech.regionalhealth.healthrecord.personalhealthrecord.compoments

{

import flash.display.Loader;   

import flash.utils.ByteArray;   

public class WelcomeLogo extends Loader   

{   

[Embed(source="com/dihtech/regionalhealth/healthrecord/personalhealthrecord/assets/images/preloader.jpg", mimeType="application/octet-stream")]   

public var WelcomeScreenGraphic:Class;   

public function WelcomeLogo()   

{   

this.loadBytes(new WelcomeScreenGraphic() as ByteArray);   

}   

}   

 

}

 

loader 主体:

 

 

package com.dihtech.regionalhealth.healthrecord.personalhealthrecord.compoments

{

import flash.display.BitmapData;   

import flash.display.Graphics;   

import flash.display.Loader;   

import flash.display.Sprite;   

import flash.utils.ByteArray;   

import mx.graphics.codec.PNGEncoder;   

public class WelcomeScreen extends Loader   

{   

//辅助属性,帮助进行进度条的定位   

private static var _LogoWidth:int = 300;   

private static var _LogoHeight:int = 180;   

private static var _LeftMargin:int = 5;   

private static var _RightMargin:int = 5;   

private static var _TopMargin:int = 1;   

private static var _BottomMargin:int = 1;   

private static var _Padding:int = -60;   

//Progress bar settings   

//进度条的设定,比如显色边框等   

private static var _BarWidth:int = 200;   

private static var _BarHeight:int = 12;   

private static var _BarBackground:uint  = 0xFFFFFF;   

private static var _BarOuterBorder:uint = 0x737373;   

private static var _BarColor:uint = 0x6F9FD5;   

private static var _BarInnerColor:uint = 0xFFFFFF;   

private var isReady:Boolean = false;   

public  var progress:Number;   

private var _logoData : BitmapData;   

public function WelcomeScreen()   

{   

//this.loadBytes(new WelcomeScreenGraphic() as ByteArray);   

}   

override public function get width() : Number   

{   

return Math.max(_BarWidth, _LogoWidth) + _LeftMargin + _RightMargin;   

}   

override public function get height() : Number   

{   

return _LogoHeight + _BarHeight + _Padding + _TopMargin + _BottomMargin;   

}   

/**  

* 进度载入完毕后,隐藏进度条  

*/  

public function set ready(value : Boolean) : void  

{   

this.isReady = value;   

this.visible = !this.isReady;   

}   

public function get ready() : Boolean { return this.isReady; }   

/**  

* 刷新函数,每个时钟周期都被调用的函数  

*/  

public function refresh():void  

{   

_logoData = this.drawProgressBar();   

var encoder:PNGEncoder = new PNGEncoder();   

this.loadBytes(encoder.encode(_logoData));   

}   

/**  

* 进度条生成函数  

*/  

private function drawProgressBar():BitmapData   

{   

// create bitmap data to create the data   

var data : BitmapData = new BitmapData(this.width, this.height, true, 0);   

// draw the progress bar   

var s:Sprite = new Sprite();   

var g:Graphics = s.graphics;   

// draw the bar background   

g.beginFill(_BarBackground);   

g.lineStyle(2, _BarOuterBorder, 1, true);   

var px : int = (this.width - _BarWidth) / 2;   

var py : int = _TopMargin + _LogoHeight + _Padding;   

g.drawRoundRect(px, py, _BarWidth, _BarHeight, 2);   

var containerWidth : Number = _BarWidth - 4;   

var progWidth:Number = containerWidth * this.progress / 100;   

g.beginFill(_BarColor);   

g.lineStyle(1, _BarInnerColor, 1, true);   

//根据progress进度,来画出进度条的长度   

g.drawRect(px + 1, py + 1, progWidth, _BarHeight - 3);   

data.draw(s);   

return data;   

}   

}   

 

}

 

<think>嗯,用户问的是预加载器(preloader)的相关信息,包括什么是preloader以及如何实现预加载功能。首先,我需要明确预加载器的定义和它在不同场景下的应用。预加载器通常用于提高用户体验,提前加载资源或数据,减少等待时间。可能涉及的技术包括前端预加载、Android应用中的预加载,还有可能涉及JavaScript库或者RxJava等框架。 接下来,用户提供的引用资料里有关于Java、Android、jQuery插件的示例。比如引用1和2提到了Java中的PreLoader类,引用3是jQuery的预加载插件,引用4是Android中使用RxJava实现预加载。这说明用户可能对多种实现方式感兴趣,需要覆盖不同平台和技术。 我需要先解释预加载器的基本概念,然后分不同场景说明实现方法。例如,前端可以用jQuery插件,Android可以用RxJava或预加载类,服务端可以用Java多线程。还要注意用户提到的代码示例,比如引用3中的HTML结构和引用4中的RxJava代码,需要正确引用这些例子到回答中。 另外,用户的问题结构要求生成相关问题,我需要确保相关问题与预加载器相关,覆盖实现方式、优化、应用场景等。同时,回答中引用的部分需要正确标注引用来源,比如引用3和4。 需要检查是否所有技术点都覆盖到了,比如资源预加载、数据预加载,以及不同平台的具体实现。还要注意使用中文回答,并确保LaTeX格式正确,但用户的问题中没有数学表达式,可能不需要用到。不过根据系统指令,如果有变量或代码,要正确格式化。这里的回答中主要是代码示例,需要用代码块包裹,并正确标注引用。 最后,确保回答结构清晰,分点说明,每个实现方法都有对应的例子和引用。可能还需要提醒用户预加载的注意事项,比如资源浪费,需要合理控制预加载的内容和时间。</think>### 预加载器(Preloader)的定义与实现 #### 1. 什么是预加载器? 预加载器(Preloader)是一种技术手段,通过提前加载用户可能需要的资源(如图片、数据、页面等),减少后续操作的等待时间,提升用户体验[^3]。其核心思想是“空间换时间”,常见于网页、移动应用和游戏开发中。 #### 2. 实现预加载功能的常见方法 ##### (1) 网页端实现(jQuery插件) 通过预加载动画或资源文件实现页面平滑过渡: ```html <div id="preloader">加载动画内容</div> <script> $(window).on("load", function(){ $("#preloader").fadeOut(); }); </script> ``` 需配合CSS定义预加载动画样式[^3]。 ##### (2) Android端实现 **RxJava异步预加载**: ```java // 创建延迟500ms的模拟网络请求 PreLoader<String> preLoader = RxPreLoader.preLoad( Observable.just("result").delay(500, TimeUnit.MILLISECONDS) ); ``` 通过Observable管理异步任务生命周期[^4]。 **多线程预加载**: ```java int preLoaderId = PreLoader.preLoad(new Loader() { @Override public void load() { // 执行耗时操作(如数据库查询) } }); ``` 使用独立线程执行预加载任务[^1][^2]。 ##### (3) 服务端实现 通过后台线程预加载热点数据: ```python import threading def preload_data(): # 数据库查询/API调用 pass # 启动预加载线程 threading.Thread(target=preload_data).start() ``` #### 3. 注意事项 - **资源控制**:避免过度预加载导致内存占用过高 - **触发时机**:建议在空闲时段或用户行为预测后执行 - **生命周期管理**:需与页面/应用生命周期绑定,及时终止无效预加载
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值