loader加载图片的注意问题

Loader类加载swf或者图片需要注意一些问题,先看看加载出错的代码:

import mx.core.UIComponent;
   
   private var loader:Loader;
   private var urlrequest:URLRequest
   
   private function init():void{
    loader=new Loader();
    urlrequest=new URLRequest("assets/close.png");
    
    loader.load(urlrequest);
    this.addChild(loader);
   }

运行的时候将会出现TypeError: Error #1034: 强制转换类型失败:无法将 flash.display::Loader@77f0561 转换为 mx.core.IUIComponent。
 at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::addingChild()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/Container.as:3251]
 at mx.core::Container/addChildAt()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/Container.as:2200]
 at mx.core::Container/addChild()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/Container.as:2140]
 at LoaderExamples/init()[D:/myeclipse6.0workingspace/effect/flex_src/LoaderExamples.mxml:18]
 at LoaderExamples/___LoaderExamples_Application1_creationComplete()[D:/myeclipse6.0workingspace/effect/flex_src/LoaderExamples.mxml:2]
 at flash.events::EventDispatcher/dispatchEventFunction()
 at flash.events::EventDispatcher/dispatchEvent()
 at mx.core::UIComponent/dispatchEvent()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/UIComponent.as:9051]
 at mx.core::UIComponent/set initialized()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/UIComponent.as:1167]
 at mx.managers::LayoutManager/doPhasedInstantiation()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/managers/LayoutManager.as:698]
 at Function/http://adobe.com/AS3/2006/builtin::apply()
 at mx.core::UIComponent/callLaterDispatcher2()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/UIComponent.as:8460]
 at mx.core::UIComponent/callLaterDispatcher()[E:/dev/3.0.x/frameworks/projects/framework/src/mx/core/UIComponent.as:8403]
这样的错误代码,手册上面并没有给出相似的例子可以参考,通过搜索资料,找到了原因,总结如下:

Loader类的继承关系如下:

Loader Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject Inheritance EventDispatcher Inheritance Object

application不能够直接的addChild(loader),一个解决方法是加上包装类UIConponent,代码如下面所示

import mx.core.UIComponent;
   
   private var loader:Loader;
   private var urlrequest:URLRequest;
   private var uc:UIComponent;
   
   private function init():void{
    loader=new Loader();
    urlrequest=new URLRequest("assets/close.png");
    uc=new UIComponent();
    
    loader.load(urlrequest);
    uc.addChild(loader);
    this.addChild(loader);
   }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以使用 Intersection Observer API 实现图片。这个 API 可以监听一个元素是否进入了视口(viewport),进入了就会触发一个回调函数,我们就可以在这个回调函数中图片。 具体步骤如下: 1. 将页面中所有需要懒图片的 `src` 属性替换成一个 `data-src` 属性,表示真实的图片路径。 2. 使用 Intersection Observer API 监听所有需要懒图片元素。 3. 当某个图片元素进入视口时,将其 `data-src` 属性的值赋给 `src` 属性,从而真实的图片。 代码示例: ```html <img data-src="path/to/image.jpg" class="lazyload" /> <script> const lazyloadImages = document.querySelectorAll('.lazyload'); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); lazyloadImages.forEach(img => { observer.observe(img); }); </script> ``` 在上面的代码中,我们首先获取到页面中所有需要懒图片元素,并使用 Intersection Observer API 监听它们。当某个图片元素进入视口时,我们将其 `data-src` 属性的值赋给 `src` 属性,并调用 `unobserve` 方法停止监听该元素。这样就可以实现图片了。 ### 回答2: 图片是一种优化网页性能的技术,可以通过延迟页面上的图片快页面速度。即在页面初始化时,不会一次性所有图片,而是当图片进入可视区域时才进行,从而提高页面速度。 如果不使用lazy-loader,可以通过监听页面滚动事件实现图片的懒。具体步骤如下: 1. 在页面中将需要懒图片的src属性设置为一个占位符,例如data-src。 2. 监听页面滚动事件,在滚动事件的回调函数中,判断需要懒图片是否进入了可视区域。 3. 判断图片是否进入可视区域的方法是比较图片在页面中的位置和可视区域的位置,可以通过使用getBoundingClientRect()方法获取图片的位置信息,再与可视区域的信息进行比较。 4. 当图片进入可视区域时,将data-src属性的值赋给src属性,即实现图片的实际。 需要注意的是,为了避免滚动事件频繁触发,可以使用节流或防抖技术进行优化,以提高滚动事件的响应速度。 总结起来,不使用lazy-loader可以通过监听页面滚动事件,判断图片是否进入可视区域,从而实现图片的懒。这样可以减少页面时间,提高用户体验。 ### 回答3: 图片是一种优化网页速度的技术,它通过延迟图片,减少页面的初始时间,提升用户体验。如果不使用lazy-loader,我们可以通过以下步骤来实现图片。 首先,将所有需要懒图片的src属性保存在一个自定义属性中,例如"data-src"。 其次,通过监听页面的滚动事件,判断图片是否进入可视区域。当图片进入可视区域时,获取其自定义属性值,将其赋给src属性,从而触发图片。 具体实现步骤如下: 1. 在HTML中设置需要懒图片的img标签,将图片的src属性设置为占位图或空白。 ```html <img class="lazy-img" data-src="path_to_image.jpg" src="placeholder_image.jpg"> ``` 2. 使用JavaScript获取页面中所有class为"lazy-img"的img元素,并将其存储为一个数组。 ```javascript var lazyImages = document.querySelectorAll('.lazy-img'); ``` 3. 监听页面的滚动事件,判断图片是否进入可视区域。 ```javascript window.addEventListener('scroll', function() { for (var i = 0; i < lazyImages.length; i++) { if (isElementInViewport(lazyImages[i])) { lazyImages[i].src = lazyImages[i].getAttribute('data-src'); } } }); ``` 4. 编写一个函数isElementInViewport来判断图片是否进入可视区域。 ```javascript function isElementInViewport(element) { var rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } ``` 通过以上步骤,我们可以实现图片的懒效果,当图片进入可视区域时,才真实的图片资源,从而减少网页的初始时间。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值