flex 实现图片播放 方案二 把临时3张图片预加载放入内存
该方案,是预加载:前一张,当前,下一张图片,一共3张图片放入内存中。这样对内存的消耗可以非常小,加载之后的图片就释放内存。
下面示例一个是类ImagePlayers,一个是index.mxml
package
{
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.net.URLRequest;
import flash.utils.Timer; import mx.collections.ArrayCollection; import spark.components.Image; public class ImagePlayers
{
private var bitmapDataArrPre:ArrayCollection=new ArrayCollection();
private var bitmapDataArrPla:ArrayCollection=new ArrayCollection();
private var bitmapDataArrNex:ArrayCollection=new ArrayCollection(); private var playerxh:int=0;
private var playTimer:Timer; public var UrlArr:Array=[];
public var show:Image;
public var play:Image; public function ImagePlayers()
{
playTimer=new Timer(Number(500));
playTimer.addEventListener(TimerEvent.TIMER, function(evt:TimerEvent):void
{
if (playerxh < (UrlArr.length-1))
{
nextf();
}
else
{
playTimer.stop(); play.toolTip="播放"
play.source="assets/images/play/play.png";
}
});
} public function start():void
{
imgLoadPla(UrlArr[0].url);
} private function imgLoadPre(url:String):void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoadedPre);
loader.load(new URLRequest(url));
}
private function imgLoadedPre(e:Event):void
{
var _bitmapData:BitmapData = new BitmapData(e.target.width,e.target.height,false);
_bitmapData.draw(e.target.content); bitmapDataArrPre.removeAll();
bitmapDataArrPre.addItem(_bitmapData);
}
private function imgLoadPla(url:String):void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoadedPla);
loader.load(new URLRequest(url));
}
private function imgLoadedPla(e:Event):void
{
var _bitmapData:BitmapData = new BitmapData(e.target.width,e.target.height,false);
_bitmapData.draw(e.target.content); bitmapDataArrPla.removeAll();
bitmapDataArrPla.addItem(_bitmapData); if(playerxh==0)
{
show.source=bitmapDataArrPla[0];
imgLoadNex(UrlArr[1].url);
}
}
private function imgLoadNex(url:String):void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoadedNex);
loader.load(new URLRequest(url));
}
private function imgLoadedNex(e:Event):void
{
var _bitmapData:BitmapData = new BitmapData(e.target.width,e.target.height,false);
_bitmapData.draw(e.target.content); bitmapDataArrNex.removeAll();
bitmapDataArrNex.addItem(_bitmapData); }
//上一张
public function pref():void
{
if(playerxh>0)
{
bitmapDataArrNex.removeAll();
bitmapDataArrNex.addItem(bitmapDataArrPla[0]); bitmapDataArrPla.removeAll();
bitmapDataArrPla.addItem(bitmapDataArrPre[0]); playerxh--;
if(playerxh!=0)
{
imgLoadPre(UrlArr[playerxh-1].url);
} show.source=bitmapDataArrPla[0];
} }
//下一张
public function nextf():void
{
if(playerxh<(UrlArr.length-1))
{
bitmapDataArrPre.removeAll();
bitmapDataArrPre.addItem(bitmapDataArrPla[0]); bitmapDataArrPla.removeAll();
bitmapDataArrPla.addItem(bitmapDataArrNex[0]); playerxh++;
if(playerxh!=(UrlArr.length-1))
{
imgLoadNex(UrlArr[playerxh+1].url);
} show.source=bitmapDataArrPla[0];
}
}
//播放
public function playf(delay:Number=500):void
{
if(play.toolTip=="播放")
{
play.toolTip="暂停"
play.source="assets/images/play/pause.png";
if(delay!=playTimer.delay)
{
playTimer.delay=delay;
}
playTimer.start();
}
else if(play.toolTip=="暂停")
{
play.toolTip="播放"
play.source="assets/images/play/play.png";
playTimer.stop();
}
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent; private var player:ImagePlayers;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
player=new ImagePlayers();
player.show=show;
player.play=play; for(var i:int=5;i<=15;i++)
{
player.UrlArr.push({url:"http://192.168.2.9/png/data/pm25/"+Strings(i)+".gif"});
} player.start();
}
private function Strings(i:int):String
{
if(i<10)
{
return "00"+i.toString();
}
if(i<100)
{
return "0"+i.toString();
}
return "";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:VGroup>
<s:HGroup>
<s:Image id="play" source="assets/images/play/play.png" toolTip="播放" click="player.playf()" buttonMode="true" useHandCursor="true" />
<s:Image source="assets/images/play/pre.png" click="player.pref()" toolTip="上一个" buttonMode="true" useHandCursor="true" />
<s:Image source="assets/images/play/next.png" click="player.nextf()" toolTip="下一个" buttonMode="true" useHandCursor="true" />
</s:HGroup>
<s:Image id="show" fillMode="scale" scaleMode="letterbox" smooth="true" smoothingQuality="high"
width="1000" height="800" />
</s:VGroup>
</s:Application>
flex 实现图片播放 方案二 把临时3张图片预加载放入内存的更多相关文章
- flex 实现图片播放 方案一 图片全部预加载放内存
这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...
- 再谈javascript图片预加载技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
- 苹果cms如何添加播放器预加载和缓冲广告
1,来到系统后台>>系统>>播放器参数设置 可以看到添加预加载和缓冲广告的输入框.文件格式为html 自己写一个html的网页上传到网站进行调用即可.链接前面不要加http或 ...
- Javascript实现图片预加载【回调函数,多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
- Javascript兑现图片预加载【回调函数,多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- js图片预加载与延迟加载
图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片. 预加载 ...
- pyspider 示例二 升级完整版绕过懒加载,直接读取图片
pyspider 示例二 升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...
- js 函数的多图片预加载(preload) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- CentOS 6.5 安装Gitlab 7.12.2
官网环境要求 参见:https://github.com/gitlabhq/gitlabhq GitLab is a Ruby on Rails application that runs on th ...
- div块级元素获取焦点
在做弹出层时需要对div获取失去焦点 focus blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作 几个事件(摘自w3c). blur事件: ...
- php的下载
前言:你的坚持,终将美好! 今天给大家说一下,php的下载,由于php的下载本身就是一个压缩包,解压缩后即可使用.所以,解压缩的过程不再赘述. 第一步:在浏览器的地址栏输入:http://www.ph ...
- Laravel5.1 请求
这篇主要说说Request 每当用户访问我们的网站功能时都会用到它 我们可以使用Request中的一些数据来做出适当的相应. 1 常用的属性和方法 我们可以从Request中取到一些重要属性来做一些逻 ...
- Linux下OpenOffice的安装与启动
公司项目需求中增加了文档预览功能,所以采用了OpenOffice提供的将office文件转换为pdf的工具.那么我们的程序运行在服务器端,服务器系统版本多是Linux,因此有必要记录下Linux下Op ...
- 仿Windows制作TreeView数据加载
时间有限就直接贴源码吧,理解思路即可. 页面代码: <asp:TreeView ID="TreeViewLeft" runat="server" Show ...
- fatal error C1083: 无法打开包括文件:“stdint.h”: No such file or directory
stdint.h是c99标准的头文件,vc不支持,所以肯定会提示“No such file or directory”的. stdint.h是C99的标准,主要用于统一跨平台数据定义. MSVC中不带 ...
- Maven 手动把本地jar安装到本地仓库
首先,你要安装的.jar包要下载下来放在电脑上面,然后maven已经配置好了,如下图: 然后,执行一下命令就可以了 mvn install:install-file -Dfile=path-to-fi ...
- 2015-03-06——ajax基础
IE6 必须使用Microsoft.XMLHTTP ActiveX组件来实例化一个对象 IE7已实现了XMLHttpRequest对象 var request = new ActiveXObject ...
- Python 新手常犯错误
Python 新手常犯错误(第二部分) 转发自:http://blog.jobbole.com/43826/ 作用域 在这篇文章里,我们来关注作用域在Python被误用的地方.通常,当我们定义了一个全 ...