首页
学习
活动
专区
工具
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 属性可以优化这个问题,例如: jpg" width="360" height="240"> 宽度和高度应该设置的更接近图片本身的宽高比...大部分前端可能不知道图片的主要问题以及如何优化它们。 开箱即用的解决方案:即使我们意识到了这些问题,但是对于我们的研发框架可能缺少一些开箱即用的解决方案,这会大大提升优化成本。...动态加载图片:除了我们开发的时候引入的一些图片,可能还有一部分是来自于用户上传。在图片来源是动态的情况下,定义此类图片的大小可能比较困难。...在较大的视口上放大时不会超过图像的固有尺寸,容器宽度为 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里已经把发送和接受数据分离,再也不像as2的loadVars那样,一个类通吃所有了,那么这个URLVariables如何送要发送的数据呢...> 以上这些就是as3里和后台交互的基础内容,现在你可以在as3里创建这样的交互,获取动态数据来丰富你的程序,在你开始自己动手实验之前,还有一些东西值得注意: 1,记得捕获和处理异常(上述的例子里都是假定在完美的测试环境下运行

    92830

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

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

    2K20

    浏览器之性能指标-CLS

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

    98720

    程序员对美工的五大抱怨

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

    1.1K50

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

    压缩的 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的计算方法。

    82820

    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.2K20

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

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

    2.6K00

    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.2K70

    位图矢量图GIFPNGJPEGWEBP一网打尽

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

    58510

    HarmonyOS 开发实践 —— 基于RN框架实现高性能瀑布流页面

    1.1 基本概念瀑布流:瀑布流布局在应用开发中非常常见。它利用容器的布局规则,将元素项目从上到下排列,形成多列参差不齐、不断加载的效果,使内容像瀑布般倾泻而下。...优化手段在获取新数据后,服务器返回动态内容的宽高,这样可以根据已知的宽度计算出列表项的高度。通过固定宽高比,可以在 UI 绘制时直接指定组件的宽高属性。...在获取新数据后,服务器返回动态内容的宽高,这样可以根据已知的宽度计算出列表项的高度。通过固定宽高比,可以在 UI 绘制时直接指定组件的宽高属性。...(1.1.5) @react-native-oh-tpl/flash-list(1.7.0) 动态加载 是 是 是 是 懒加载 是 是 是 是 自适应列宽 是 是 是 是 动态项目高度 是 是 是 是.../>MasonryFlashList根据estimatedItemSize指定列表项在渲染之前的大小,然后,MasonryFlashList可以使用此信息来决定在初始加载之前和滚动时需要在屏幕上绘制多少个项目

    20610

    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元素(对象)仅仅是在视觉上看不见(完全透明

    91151

    前端 Web 性能清单

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

    1K30

    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

    前端 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方法,但是在这之前,我们需要确认这个图像已经完全加载。...为此,可以使用image的load方法,它是在一个元素完全加载后触发load事件时调用的方法。...裁剪是drawImage方法的最后一种用法,它总共有9个参数:源图像、源图像的裁剪区原点坐标(x, y)、源图像的裁剪区宽度和高度、在画布(目标)上绘制图像的原点坐标(x, y)及在画布上绘制图像的宽度和高度

    2.1K10
    领券