该方案,是预加载:前一张,当前,下一张图片,一共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张图片预加载放入内存的更多相关文章

  1. flex 实现图片播放 方案一 图片全部预加载放内存

    这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...

  2. 再谈javascript图片预加载技术

    图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...

  3. 苹果cms如何添加播放器预加载和缓冲广告

    1,来到系统后台>>系统>>播放器参数设置  可以看到添加预加载和缓冲广告的输入框.文件格式为html 自己写一个html的网页上传到网站进行调用即可.链接前面不要加http或 ...

  4. Javascript实现图片预加载【回调函数,多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

  5. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  6. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  7. pyspider 示例二 升级完整版绕过懒加载,直接读取图片

    pyspider 示例二 升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...

  8. js 函数的多图片预加载(preload) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...

  9. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. 基于consul构建golang系统分布式服务发现机制

    原文地址-石匠的Blog: http://www.bugclosed.com/post/5 在分布式架构中,服务治理是一个重要的问题.在没有服务治理的分布式集群中,各个服务之间通过手工或者配置的方式进 ...

  2. AI for AI

    1.Li, Ke, and Jitendra Malik. "Learning to optimize." arXiv preprint arXiv:1606.01885 (201 ...

  3. postgresql学习文档

    字符串函数: http://www.php100.com/manual/PostgreSQL8/functions-string.html http://gavin-chen.iteye.com/bl ...

  4. windows下用py2exe打包脚本为可双击运行程序

    文件夹结构: ├── readme.txt ├── settings.py #程序参数 ├── settings.pyc ├── setup.py    #安装文件 ├── spider.ico   ...

  5. composer爆错:zlib_decode():data error

    昨晚用nginx运行Yii的一个开源小项目,结果composer安装依赖一直报错,如下 Failed to decode response: zlib_decode(): data error 如果遇 ...

  6. linux 下 Shell编程(三)

    if语句应用实例 if语句可以在程序中实现各种逻辑判断. 用if语句判断并显示文件的信息 可以用test命令和相关的参数来判断文件的属性,然后根据判断结果输出文件的信息. #!/bin/bash #4 ...

  7. JQUERY实现的小巧简洁的无限级树形菜单

    JQUERY实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  8. SQL获取某个时间字符串里的月和日,获取某天是周几

    select datename(weekday,'2016-11-4') as '周' select convert(varchar,datepart(month,'2016-11-4')) as ' ...

  9. Sql注入基础_mysql注入

    Mysql数据库结构 数据库A 表名 列名 数据 数据库B 表名 列名 数据 Mysql5.0以上自带数据库:information_schema information_schema:存储mysql ...

  10. NoSQL 数据库分类 颠覆

    NoSQL 数据库分类 类型 部分代表特点 列存储 HbaseCassandraHypertable顾名思义,是按列存储数据的.最大的特点是方便存储结构化和半结构化数据,方便做数据压缩,对针对某一列或 ...