【超空间】
程序还有一个dispose方法用于销毁程序。 包括这几个部分: _upload上传文件对象:它本身已经有一个dispose方法来销毁程序; _preload预载图片对象:先清除它的onload/onerror事件再移除元素; file和img属性:直接设为null,由于不是程序创建的元素,留给使用者来移除。
说到移除元素,顺便说一下超空间(DOM hyperspace),这是从“ppk谈javascript”中看到的。 大概指的是当元素不在dom里面,而js又有关联时,元素并不会消失,而是保存在一个称为“超空间”的地方。 详细参考书的DOM 超空间部分。 书中还说可以根据是否有parentNode来判断元素是否在超空间,但测试以下代码:
<body></body> <script> var elm = document.createElement("div"); alert(elm.parentNode); document.body.removeChild(document.body.appendChild(elm)); alert(elm.parentNode); </script>
第一次parentNode都是null,没有问题,按理第二次也应该是null,但ie却是一个object。 经测试,这个object的nodeType是11,也就是一个碎片对象(FRAGMENT)。 而且各个被removeChild移除的元素的parentNode都不相同,即会生成不同的碎片对象。 这种情况算不算在“超空间”呢,不过书中也只是说“一般来说”,也不用太考究。
那么用innerHTML清除呢?再测试以下代码:
<body><div id="test"></div></body> <script> var elm = document.getElementById("test"); document.body.innerHTML = ""; alert(elm.parentNode); </script>
结果在ie也是null了,看来removeChild和innerHTML在清除元素时产生了不同的结果。
那个碎片对象貌似没什么用(难道为了保证有parentNode?),那是不是innerHTML就一定比removeChild好呢? 再测试以下代码:
<body> <style>div{border:1px solid #000; height:20px;}</style> <span><div id="test1">test1</div></span> <span><div id="test2">test2</div></span> </body> <script> var div1 = document.getElementById("test1"), parent1 = div1.parentNode; parent1.removeChild(div1); alert(div1.tagName + ":" + div1.innerHTML); parent1.appendChild(div1);
var div2 = document.getElementById("test2"), parent2 = div2.parentNode; parent2.innerHTML = ""; alert(div2.tagName + ":" + div2.innerHTML); parent2.appendChild(div2); </script>
当使用removeChild时,移除元素的结构并没有发生变化,各个浏览器的效果都一样。 而使用innerHTML清除时,其他浏览器的效果跟removeChild一样,但在ie被移除的元素就只剩下一个“外壳”了。
个人推测,ie在使用innerHTML时,被移除的元素会变成一个个单独的元素,失去了彼此的联系。 形象点说就是removeChild是直接掰断树枝,还能继续嫁接使用,而innerHTML是把需要的树叶节点取下来,再把树枝烧掉。 ps:仅仅是推测,谁有官方资料请告诉我。
那么removeChild的好处是移除的元素能再次使用,兼容性好,不好的地方是ie会产生一个没用的碎片对象。 而innerHTML的好处是不会产生多余的碎片对象,方便高效,但在ie被移除的元素基本不能再用,有兼容性问题。 那就可以根据需要使用不同的方法了,至于防止内存泄漏用那个好,感觉是innerHTML,但没有更深入研究的话还说不清楚。
使用技巧
- 一般来preview方法都是在onchange中调用,即选择文件后立即显示预览。
- 在不需要程序时最好执行一次dispose方法来销毁程序,防止内存泄漏等。
- 利用ImagePreview.TRANSPARENT可以显示透明图片,而不需另外隐藏或增加文件。
- 第二个实例中的ResetFile是用来重置file控件的,详细参考这里file的reset。
而file控件样式设置详细参考这里的file样式。
- asp版本使用Persits.Jpeg组件缩放图片,测试请先安装该组件。
使用说明
实例化时,有两个必要参数,分别是file控件对象和img元素的预览显示对象:
new ImagePreview( file, img );
可选参数用来设置系统的默认属性,包括:
属性: 默认值//说明
mode: ImagePreview.MODE,//预览模式 ratio: 0,//自定义比例 maxWidth: 0,//缩略图宽度 maxHeight: 0,//缩略图高度 onCheck: function(){},//预览检测时执行 onShow: function(){},//预览图片时执行 onErr: function(){},//预览错误时执行 以下在remote模式时有效 action: undefined,//设置action timeout: 0//设置超时(0为不设置) 如果要使用remote模式必须设置一个action。
还提供了以下方法: preview:执行预览操作; dispose:销毁程序。
程序源码
代码拷贝框
[Ctrl+A 全部选择 然后拷贝]
经典论坛交流: http://bbs.blueidea.com/thread-2963175-1-1.html
本文链接:http://www.blueidea.com/tech/web/2009/7285.asp
出处:蓝色理想
责任编辑:bluehearts
上一页 JavaScript 图片预览效果 [8] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|