首页 > 代码库 > 解决SWFUpload的按钮图片加载慢的问题
解决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(); } };
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。