解决SWFUpload的按钮图片加载慢的问题

使用SWFUpload时如果参数设置了button_image_url这一项,就会自动生成这个图片在button_placeholder_id的位置,但是实际运用中如果SWFUpload是实时加载的(比如弹出框,脚本动态加载的HTML等),就会明显的看出SWFUpload的按钮图片有一个延时。

首先我想当然地以为是SWFUpload在flash加载完时才把图片显示到浏览器上,导致了这个延时,于是我在SWFUpload的swfupload_loaded_handler里处理我的事件,发现依然有延时。

又做了几个测试,发现并不是SWFUpload加载的问题,而是object本身在浏览器里的渲染问题。比如我先把SWFUpload在页面上加载,加载完成后把他隐藏再显示,这样也会有同样的延时。

最后采用一个投机取巧的办法,就是给button的容器加上背景图、宽高让这个按钮占位元素变得和button一模一样,然后更改SWFUpload的加载模式(原来是替换掉按钮占位元素),改为插入到占位元素的子节点去,同时把opacity设为0,这样至始至终只有占位元素在显示,自然不会有延时的情况出现了。

修改swfupload.js中的代码:


// Private: loadFlash replaces the button_placeholder element with the flash movie.
SWFUpload.prototype.loadFlash = function () {
var targetElement, tempParent;

// Make sure an element with the ID we are going to use doesn‘t already exist
if (document.getElementById(this.movieName) !== null) {
throw "ID " + this.movieName + " is already in use. The Flash Object could not be added";
}

// Get the element where we will be placing the flash movie
targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;

if (targetElement == undefined) {
throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
}

// Append the container and load the flash
tempParent = document.createElement("div");
tempParent.innerHTML = this.getFlashHTML(); // Using innerHTML is non-standard but the only sensible way to dynamically add Flash in IE (and maybe other browsers)
//targetElement.parentNode.replaceChild(tempParent.firstChild, targetElement);

/*解决button显示慢的问题*/
$(tempParent.firstChild).css("opacity", 0);//偷懒使用jquery来处理opacity浏览器兼容
targetElement.removeAttribute("id");//必须移除这个id,否则多个swfupload同时存在时会有问题
targetElement.appendChild(tempParent.firstChild);
/**/

// Fix IE Flash/Form bug
if (window[this.movieName] == undefined) {
window[this.movieName] = this.getMovieElement();
}

};

解决SWFUpload的按钮图片加载慢的问题

时间: 2024-10-07 17:18:22

解决SWFUpload的按钮图片加载慢的问题的相关文章

nginx实现动态分离,解决css和js等图片加载问题

改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 <a href="http://www.cnblogs.com/sz-jack/p/5200283.html">http://www.cnblogs.com/sz-jack/p/5200283.html</a>

图片加载库Glide——解决图片错乱+无法设置tag

今天在写一个图片加载类ImageLoader,在使用的时候想用Glide替代我写的ImageLoader,然后问题就出来了!!! 第一个问题:在使用自己写的ImageLoader的时候,为了防止item复用导致的图片错乱,设置了Tag 如下代码 @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder = null; if (convertView ==

Vue 动态图片加载路径问题和解决方法

最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面是核心组件代码: <el-tree :data="data" class="tree-view" node-key="id" :props="defaultProps" @node-click="click&quo

Android BitmapFactory.Options 解决大图片加载OOM问题

当我们在Android使用bitmap加载图片过程中,它会将整张图片所有像素都存在内存中,由于Android对图片内存使用的限制,很容易出现OOM(Out of Memory)问题. 为了避免此类问题我们可以采用BitmapFactory.Options或是使用第三方的图片加载库.如Fresco.Picasso等. BitmapFactory.Options 读取图片尺寸.类型 如文档所示: 如果BitmapFactory.Options中inJustDecodeBounds 字段设置为true

FaceBook推出的Android图片加载库-Fresco

FaceBook推出的Android图片加载库-Fresco 原文链接:Introducing Fresco: A new image library for Android 译者 :  ZhaoKaiQiang 校对者: Chaossss 校对者: bboyfeiyu 校对者: BillionWang 状态 :  完成 在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和a

【Android开发经验】FaceBook推出的Android图片加载库-Fresco

欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件架构设计.测试等文章 原文链接:Introducing Fresco: A new image library for Android 译者 : ZhaoKaiQiang 校对者: Chaossss 校对者: bboyfeiyu 校对者: BillionWang 状态 : 完成 在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多

Fresco-FaceBook推出的Android图片加载库

在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4byte的空间.如果手机的屏幕是480*800,那么一张屏幕大小的图片就要占用1.5M的内存.手机的内存通常很小,特别是Android设备还要给各个应用分配内存.在某些设备上,分给Facebook App的内存仅仅有16MB.一张图片就要占据其内存的十分之一. 当你的App内存溢出会发生什么呢?它当

Fresco介绍 - 一个新的android图片加载库

在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4byte的空间.如果手机的屏幕是480*800,那么一张屏幕大小的图片就要占用1.5M的内存.手机的内存通常很小,特别是Android设备还要给各个应用分配内存.在某些设备上,分给Facebook App的内存仅仅有16MB.一张图片就要占据其内存的十分之一. 当你的App内存溢出会发生什么呢?它当

android 浏览器对图片加载高度渲染问题

今天在开发有道汉语词典移动版的时候遇到了一个很奇怪的问题. 在android设备上访问的时候,总是发现有底部背景色不能完全渲染出来的情况(有时候又是正常的,一会儿出现一会儿不出现,iphone设备也是完全ok),就是一半是底色,还有一半没了... 仔细观察了一下发现在打开网页的时候先显示了头部的小图片和标题以及底部的按钮,再显示中间的大图,有个加载过程. ok,怀疑是图片还没加载完毕,导致高度计算出错,给底部设背景的时候加载完的那块就没颜色... 那么使用$(window).load()函数来解