首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用Flash在ActionScript 3中动态加载渐进式jpeg/jpg,并在完全加载之前知道它的宽度/高度

要在ActionScript 3中动态加载渐进式JPEG/JPG并在完全加载之前知道其宽度和高度,您可以使用以下步骤:

  1. 导入必要的类:import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.display.Bitmap;
  2. 创建一个Loader实例和一个URLRequest实例:var loader:Loader = new Loader(); var urlRequest:URLRequest = new URLRequest("path/to/your/image.jpg");
  3. 添加事件监听器以便在加载过程中获取宽度和高度:loader.contentLoaderInfo.addEventListener(Event.OPEN, onOpen); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
  4. 开始加载JPEG/JPG图像:loader.load(urlRequest);
  5. 定义事件处理函数:function onOpen(event:Event):void { trace("开始加载..."); } function onProgress(event:ProgressEvent):void { var loaded:Number = event.bytesLoaded; var total:Number = event.bytesTotal; var percent:Number = (loaded / total) * 100; trace("加载进度:" + percent.toFixed(2) + "%"); if (loader.content != null && loader.content is Bitmap) { var bitmap:Bitmap = Bitmap(loader.content); trace("宽度:" + bitmap.width + ",高度:" + bitmap.height); } } function onComplete(event:Event):void { trace("加载完成!"); if (loader.content != null && loader.content is Bitmap) { var bitmap:Bitmap = Bitmap(loader.content); trace("宽度:" + bitmap.width + ",高度:" + bitmap.height); } }

这样,您就可以在ActionScript 3中动态加载渐进式JPEG/JPG,并在完全加载之前知道其宽度和高度。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

实战:使用 React 实现渐进式加载图片

为了解决这个问题,开发人员需要部署支持积极加载体验策略。其中一个策略是渐进式图像加载本文中,我们将学习渐进式图像加载如何在React中实现这个策略。...这通过提供图像随时出现感知来改善用户体验。 下面的GIF演示了如何使用本地元素来渲染图像。 正如我们所看到,尽管页面已经加载,但图像在呈现之前需要多花一秒钟时间,从而导致空白。...本文中,我们将学习如何改进用户体验,并通过React中从无到有地加载图像来防止布局变化。我们还将学习如何使用外部库来实现相同结果。...此外,这些框架使用高级图像处理选项,并允许延迟加载屏幕下方图像。 我们例子中,焦点是使用React实现渐进图像加载。让我们开始实现。...注意我们是如何使用…扩展操作符来注入组件接收到任何其他props。例如,我们将在稍后看到,组件将接收所需图像宽度高度。与此同时,我们为src分配了一个占位符图像源,以便快速显示。

3.7K30

Web图像组件设计最佳实践

img 元素上设置 width 和 height 属性可以优化这个问题,例如: 宽度高度应该设置更接近图片本身宽高比...大部分前端可能不知道图片主要问题以及如何优化它们。 开箱即用解决方案:即使我们意识到了这些问题,但是对于我们研发框架可能缺少一些开箱即用解决方案,这会大大提升优化成本。...动态加载图片:除了我们开发时候引入一些图片,可能还有一部分是来自于用户上传。图片来源是动态情况下,定义此类图片大小可能比较困难。...较大视口上放大时不会超过图像固有尺寸,容器宽度为 100% Layout = Fixed:不管什么设备上,宽度高度是固定。...渐进式加载 所谓渐进式加载,就是实际图像加载时先显示质量较差占位符图,它可以与懒加载结合使用,从而提高了感知性能并增强用户体验。

2K20
  • 分享一次纯 css 瀑布流 和 js 瀑布流

    只是 .masonry 容器中使用 CSS 不一样; .masonry 中是通过采用 flex-flow 来控制列,并且允许换行 这里关键是容器高度,我这里要显式设置 height 属性,...同样,响应式设置,使用 Flexbox 实现响应式布局比多列布局 Multi-columns 要来得容易,他天生就具备这方面的能力,只不过我们这里需要对容器高度做相关处理。...: [0ledbff8sh.jpeg] 问题来了 看到这里,我们可以发现,使用纯 css 写瀑布流,每一块 item 都是从上往下排列,不能做到从左往右排列: [kc4aje4u6f.jpeg] 这样子若是动态加载图片瀑布流...:根据每张图片位置设置 top 和 left 值 // 瀑布流效果 // 这里有一个坑(已经修复): // 因为是动态加载远程图片,加载完全无法获取图片宽高 // 未加载完全就无法设定每一个 item...// item top 值:第一行:top 为 0 // 其他行:必须算出图片宽度 item 宽度缩小比例,与获取图片高度相乘,从而获得 item 高度 //

    2.4K40

    AS3与PHP通信

    目前flash各方个面的应用越来越广,而flash也不单只是注重自身绚丽效果,也需要和外界程序交换数据,以实现更强大功能,随着as3到来,flash和外部交互方式也越来越简便和合理化。...URLLoader接受一个URLRequest 作为构造参数,使用load方法来加载数据。URLLoder也可以进行监听,这点也loadVars不同,一个简单示例如下: 1....,也就是说,只包含接受到数据,而不管要发送数据,那么,as3里如何向后台发送数据呢?...URLVariables允许你flash和后台程序间传输变量, as3里已经把发送和接受数据分离,再也不像as2loadVars那样,一个类通吃所有了,那么这个URLVariables如何送要发送数据呢...> 以上这些就是as3里和后台交互基础内容,现在你可以as3里创建这样交互,获取动态数据来丰富你程序,在你开始自己动手实验之前,还有一些东西值得注意: 1,记得捕获和处理异常(上述例子里都是假定在完美的测试环境下运行

    92130

    谈谈Web应用中图片优化技巧及反思

    JPG/JPEG压缩与渐进式图片 压缩jpg/jpeg图片方式与png类似,imagemin提供了两个插件:jpegtrain和mozjpeg供我们使用。...progressive: true选项,这可以将图片转换为渐进式图片,关于渐进式图片,允许加载照片时候,如果网速比较慢的话,先显示一个类似模糊有点小马赛克质量比较差照片,然后慢慢变为清晰照片...而相比之下,非渐进式图片(Baseline JPEG)则会老老实实地从头到尾去加载: ?...配置文件中,引入自己需要插件,使用方法完全相同。...以上介绍两种方式,其实最终实现效果是相似的,但这里还有个问题,当网速慢时候,图片还没加载之前,用户会看到一段空白时间,在这段空白时间,就算是渐进式图片也无法发挥作用,我们需要更友好展示方式来弥补这段空白

    2K20

    程序员对美工五大抱怨

    网站只需要很简单按钮和一些文本就行了,但是美工却坚持要使用flash,就算加载时间都是原来三倍也不管。...Flash给了美工无限创作可能,使得他们(特别是熟悉ActionScript美工)能够掌控最终产品。...· 减少了PSD文件中图层数量,因此图层组织起来更容易。 牢骚4:美工没有针对实际图形做调整!   我们使用是内容管理系统,用户客户端完全控制所使用内容。...问题   在网站最后提交之前使用虚拟内容来建站,这一方法可以说是历史悠久。但是,由于不是真正内容,可能会导致美工最终做出设计不是很让人满意。...我觉得限定下显示标题等元素区域高度是有必要。这将有助于你最后设计中确认它们需要占用多少空间。 牢骚5: 美工让我来猜他作品风格!

    1.1K50

    浏览器之性能指标-CLS

    以下是宽高比渲染中几个方面作用: 布局计算:浏览器计算页面布局时,会使用图片宽高比来确定图片在文档流中尺寸和位置。宽高比可以帮助浏览器确定图片宽度高度,以便正确地分配空间。...❞ 如何确定/设置宽高比 确定或设置一个图片宽高比可以通过以下几种方法实现: 使用固定宽度高度:如果我们已经确定了要显示图片具体宽度高度,可以直接使用这些数值来计算宽高比。...,可以使用JavaScript来获取图片实际宽度高度,并进行计算。...使用font-display: swap;:这将在字体加载完成之前显示备用字体,然后字体加载完成后再切换为所需字体。...然而,当无法提供精确尺寸图像时,我们应为显示每个图像设置宽度高度属性。这样,用户浏览器将准确知道图像位置,而不需要在最后一刻调整布局。

    85720

    现代图片性能优化及体验优化指南

    压缩 AVIF 图像保留了很高图片质量,避免了恼人压缩伪影等问题 相对而言,AVIF 解码和编码速度不如 JPEG XL,它不支持渐进式渲染 最后,再看看兼容性,目前(2023-02-05)兼容性介于...虽然 AVIF、JPEG XL 等新型图片格式未得到任何浏览器完全支持,但是新版本 Chrome、Firefox 和 Edge Chromium,可以使用配置标志启用对应图像格式,配合 HTML...srcset 属性还有一个 w 宽度描述符,配合 sizes 属性一起使用,可以覆盖更多面。 sizes 属性怎么理解呢?定义图像元素不同视口宽度时,可能大小值。...> 标签同时写上高宽,可以图片未加载之前提前占住位置,避免图片从未加载状态到渲染完成状态高宽变化引起重排问题。...object-fit:设定内容应该如何适应到其使用高度宽度确定框,避免图片拉伸 object-position:基于 object-fit,设置图片实际展示 position 范围 image-rendering

    1.5K30

    Android中高效加载大图

    因此,你完全可以略过本篇文章,但我想介绍一些加载大图基础知识及其实际工作原理。 我只想解释图片解码背后逻辑。我建议你使用Picasso或Glide来加载图片。没有必要重新发明轮子。...原因如下: 存储磁盘上图片是被压缩过(以JPG,PNG或类似的格式存储)。 一旦将图片加载到内存中,它就不再被压缩,并占用尽可能多图片所有像素所需内存空间。...这句代码是指我们不想将图片加载到内存中。我们只想获取图片相关信息(宽度高度等),并使用这些信息来计算缩放比例。...我们运行这段代码并打印图片信息: options.outHeight : 1126 options.outWidth : 2000 options.bitmap : null 只输出了图片高度宽度...我们不能将缩放比设置为一个常数,所以我们必须根据图片大小来计算值。 如何计算inSampleSize值取决于您。我意思是,你可以根据你需要编写inSampleSize计算方法。

    82620

    FlashFlex学习笔记(5):捕获摄像头(续)--在线抓屏并保存到客户端本地

    思路: 使用摄像头以及在线抓屏在上一节Flash/Flex学习笔记(2):捕获摄像头 里已经讲过了,就不重复粘贴了,至于客户端保存文件,Flash里用起来也很简单:直接调用 FileReference...即可,另外为了减少图片大小,还可能借助AS3.0扩展库(项目地址http://code.google.com/p/as3corelib/),把bmp格式位置转换成jpeg再保存 扩展: 结合本文方法...,再配合Flash/Flex学习笔记(4):如何打开网页及Get/Post数据 ,可以很方便做出"在线大头贴"或"在线生成会员头象"等功能 源代码: var W:int=stage.stageWidth...;//场景原始宽度 var H:int=stage.stageHeight;//场景原始高度 stage.scaleMode=StageScaleMode.NO_SCALE;//舞台禁止...; var file:FileReference=new FileReference(); var fileName:String= e.target.data.label + ".jpg

    1.6K80

    图片该如何优化来提高网站性能,这里提供几种方法

    因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩使用加载时间保持可接受水平。...此外要执行图片压缩,还需要根据要压缩图像类型安装对应插件。 JPEG/JPG JPG 优点 JPG 最大特点是 有损压缩。这种高效压缩算法使成为了一种非常轻巧图片格式。...默认情况下,MozJPEG 生成渐进式 jpeg,这会导致图像从低分辨率逐渐加载到高分辨率,直到图片完全加载为止。由于它们编码方式,它们也比原始 jpeg 略小。...你可以使用 Sindre Sorhus 提供这个命令行工具来检查JPEG图像是否是渐进式。 Addy Osmani 已经很好地总结了使用渐进式 jpeg 优缺点。...既然我们已经认识到可能情况下使用WebP格式是有价值,那么很重要一点是—它不能完全替代 JPEG 和 PNG,因为浏览器对 WebP 支持并不普遍。

    1.1K20

    6个最好WordPress图像优化器插件提高WordPress网站性能

    使用JPEGtran、TinyJPG、JPEGmini和PNGout等工具优化您加载图像。这将改善图像加载时间。   ...50张图像 图像调整大小-设置最大宽度高度,大图像将在压缩时按比例缩小 尺寸不正确图像检测-快速定位降低您网站速度图像 DirectorySmush–优化图像,即使它们不在媒体库中 自动优化-异步自动压缩您附件...处理所有文件-Smush将处理PNG、JPEG和GIF文件以获得最佳结果 超级服务器–使用WPMUDEV快速、可靠SmushAPI,Smush图像不会变慢 4、Optimole   该插件完全基于云...先进后台优化,以加快您工作流程。 优化媒体库中已有的单个图像。 轻松批量优化现有媒体库。 通过设置最大宽度和/或高度来自动调整巨大图像上传大小,以获得更合理浏览器显示。...使用渐进式JPEG编码更快地显示JPEG图像。 选择原始图像中保留版权元数据、创建日期和GPS位置。 支持动画PNG压缩。 选择可以优化图像缩略图大小。 使用单个API密钥支持多站点。

    2.5K00

    WordPress集成PHP缩略图,并开启Nginx缓存方法

    海量 IP 请求下,这些简单 PHP 动态判断就成为了拖沓大户了! 这也就不难理解 WP-Super-Cache php 缓存模式比 Mod_Rewrite 模式要慢原因了!...当  Nginx 缩略图不给力时,我第一时间就想到了。 这玩意在访问量过大时是个拖沓大户,但如果我想办法去掉其中 PHP 动态判断呢?自然就能发挥到淋漓尽致了! 下面简单分享下张戈做法。...src=图片地址&h=图片高度&w=图片宽度&zc=1" class="thumb" /> 可以看到,这种传参肯定是存在动态判断,所以要完全静态化,我首先就要修改这个缩略图形式。...w=)或高度(?h=)参数,都会将访问重写到/thumb/?src=* 这个动态缩略图生成接口上       if ( $width !...(bmp|gif|jpeg|jpg|png)('|\")(.*?)

    1.1K70

    位图矢量图GIFPNGJPEGWEBP一网打尽

    位图和矢量图如何抉择 那么说了这么多,我们该在项目中如何抉择使用哪个格式图片信息进行图片信息展示呢?...:1600万+种颜色 透明度 .gif:1位透明度,像素要么透明要么不透明 .jpg(.jpeg):不支持透明度 .png(apng):支持完全半透明 .webp:支持完全半透明 是否支持动画 .gif...渐进式图像呈现:PNG第三个优势与渐进式图像呈现有关;虽然GIF只有四个通道,但PNG具有两维交错,七个通道,使其视觉上更加吸引人。此外,与相似的GIF相比,PNG可以实现高达25%更好压缩。...它是最知名格式之一,也是数字相机默认设置。JPEG非常适合于社交媒体和网站上使用中等质量、逼真的图像。一个优点是被所有浏览器支持,并且可以被所有图像编辑软件编辑。...进行GIF与JPEG比较时,图像质量和文件大小是考虑两个主要因素。 ❝如前所述,GIF和JPEG之间一个显著区别是JPEG压缩时会丢失数据,而GIF使用是无损压缩算法。

    55710

    前端 Web 性能清单

    preconnect 完全相同,但具有更广泛浏览器支持。...确定关键代码后,将该代码从呈现阻止 URL 移动到 HTML 页面中内联脚本标记。 HTML 页面头部样式块中内嵌第一次绘制所需关键样式,并使用加载链接异步加载其余样式。...图像元素具有明确宽度高度 图像元素上设置明确宽度高度,以减少布局偏移并改善 CLS。 预加载最大内容绘画 (LCP) 预加载 LCP 元素使用图像以缩短 LCP 时间。...避免过大 DOM 大小 大型 DOM 会增加内存使用量,导致更长样式计算,并产生代价高昂布局回流。 多个页面重定向 重定向页面加载之前引入了额外延迟。...巨大网络有效载荷 大型网络有效载荷使用户付出了真金白银,并且与较长加载时间高度相关。 推迟请求直到需要它们。 将请求优化到尽可能小,最小化和压缩,尽可能使用 WebP 处理图像。

    88530

    JPEGExifTIFF格式解读(4):win10照片旋转win7不识别。

    ,而图片内容不会做任何改变,包括旋转后宽度高度也不会做改变,包括JPEG和EXIF中宽度高度信息。...于是,处理旋转过后图片,通过JDK 8.0版本去读取javax.imageio.ImageIO.read(new File(fileName)).getWidth/getHeight宽度高度时,也是无法获知到底是不是旋转过...但是,如果是Windows XP或Windows 7当中,对图片文件进行旋转时,文件内容做了全面的变化。旋转后宽度高度也会改变并保存到EXIF中,图片内容改变。...提供了可执行文件供命令行使用,也提供了C++API供编程。.../f5557c0e689e使用HTTP2和渐进式JPEG图片更快加载图像 http转载本站文章《JPEG/Exif/TIFF格式解读(4):win10照片旋转win7不识别。》

    1.4K10

    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    盒模型:W3C标准中,如果设置一个元素宽度高度,指的是元素内容宽度高度,而在Quirks 模式下,IE宽度高度还包含了padding和border。 ?   ...设置百分比高度standards模式下,一个元素高度是由其包含内容来决定,如果父元素没有设置百分比高度,子元素设置一个百分比高度是无效用margin:0 auto设置水平居中:使用margin...这也是为什么建议使用link方式来加载css,而不是使用@import方式。 11.知道网页制作会用到图片格式有哪些?   答案:   png-8,png-24,jpeg,gif,svg。   ...屏幕阅读器(如果访客有视障)会完全根据你标记来“读”你网页.   例如,如果你使用含语义标记,屏幕阅读器就会“逐个拼出”你单词,而不是试着去对完整发音....即是,使用CSS display:none属性后,HTML元素(对象)宽度高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是视觉上看不见(完全透明

    90551

    前端 Web 开发常见问题概述

    因浮动自动累加宽度,从而实现自适应大小容器或按钮,这是浮动价值。 但在子元素使用了浮动以后,父容器可能因子元素浮动而丧失高度。...如下所示: 在上图中,左图像与右文本是有高度,但因为使用了浮动属性,致使其父容器——即最上面的蓝色 div 高度为 0。 使用 clear CSS 属性可以解决这个问题。...,所以宽度是 100%,给左右两个边栏留出宽度是靠父容器 margin-left、margin-right 样式设置。...(gif|jpg|jpeg|png|bmp|swf)$ { expires 3d; } 开启 nginx gzip 压缩 nginx.conf 中使用如下信息开启 gzip 压缩功能: gzip...路由跟踪测试 windows 上使用 tracert, mac 上使用 traceroute,用于检测从当前电脑端到达指定服务器经过哪些节点,观察哪些节点影响了页面加载速度,有针对性地优化。

    1.4K21

    canvas 处理图像(上)

    加载图像 canvas 高级功能(下)讲述了如何将画布导出为图像,将它保存到本地和与他人共享。现在,我们将学习如何实现完全相反操作:将图像加载到画布中。...现在,你只需要知道使用外部图像时,画布会限制一些特定功能就可以了。 ❞ 无论使用哪一种方法,现在我们都应该能够访问图像 DOM 对象了。...最后要做一件事是将这个图像对象传递给2D渲染上下文drawImage方法,但是在这之前,我们需要确认这个图像已经完全加载。...为此,可以使用imageload方法,它是一个元素完全加载后触发load事件时调用方法。...裁剪是drawImage方法最后一种用法,总共有9个参数:源图像、源图像裁剪区原点坐标(x, y)、源图像裁剪区宽度高度画布(目标)上绘制图像原点坐标(x, y)及画布上绘制图像宽度高度

    2.1K10

    WebP图片格式入侵

    打开各大网站,突然发现图片格式竟然都是 webp格式。 说好GIF,JPG呢? 那么为啥要使用WEBP格式呢? 完全蒙逼了!!!...WebP格式,谷歌(google)开发一种旨在加快图片加载速度图片格式。图片压缩体积大约只有JPEG2/3,并能节省大量服务器带宽资源和数据空间。...他们发现,“质量相同情况下,WebP格式图像体积要比JPEG格式图像小40%。...WebP 优势体现在具有更优图像数据压缩算法,能带来更小图片体积,而且拥有肉眼识别无差异图像质量;同时具备了无损和有损压缩模式、Alpha 透明以及动画特性, JPEG 和 PNG 上转化效果都相当优秀...客户端软件,内嵌了基于 Chromium webview,这类浏览器中应用网页是可以完全使用WebP 格式,提升加载渲染速度,不考虑兼容。 2.

    1.6K20
    领券