|
【超空間】
程序還有一個(gè)dispose方法用于銷毀程序。
包括這幾個(gè)部分：
_upload上傳文件對象：它本身已經(jīng)有一個(gè)dispose方法來銷毀程序；
_preload預(yù)載圖片對象：先清除它的onload/onerror事件再移除元素；
file和img屬性：直接設(shè)為null，由于不是程序創(chuàng)建的元素，留給使用者來移除。
說到移除元素，順便說一下超空間（DOM hyperspace），這是從“ppk談javascript”中看到的。
大概指的是當(dāng)元素不在dom里面，而js又有關(guān)聯(lián)時(shí)，元素并不會(huì)消失，而是保存在一個(gè)稱為“超空間”的地方。
詳細(xì)參考書的DOM 超空間部分。
書中還說可以根據(jù)是否有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，沒有問題，按理第二次也應(yīng)該是null，但ie卻是一個(gè)object。
經(jīng)測試，這個(gè)object的nodeType是11，也就是一個(gè)碎片對象（FRAGMENT）。
而且各個(gè)被removeChild移除的元素的parentNode都不相同，即會(huì)生成不同的碎片對象。
這種情況算不算在“超空間”呢，不過書中也只是說“一般來說”，也不用太考究。
那么用innerHTML清除呢？再測試以下代碼：
<body><div id="test"></div></body>
<script>
var elm = document.getElementById("test");
document.body.innerHTML = "";
alert(elm.parentNode);
</script>
結(jié)果在ie也是null了，看來removeChild和innerHTML在清除元素時(shí)產(chǎn)生了不同的結(jié)果。
那個(gè)碎片對象貌似沒什么用（難道為了保證有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>
當(dāng)使用removeChild時(shí)，移除元素的結(jié)構(gòu)并沒有發(fā)生變化，各個(gè)瀏覽器的效果都一樣。
而使用innerHTML清除時(shí)，其他瀏覽器的效果跟removeChild一樣，但在ie被移除的元素就只剩下一個(gè)“外殼”了。
個(gè)人推測，ie在使用innerHTML時(shí)，被移除的元素會(huì)變成一個(gè)個(gè)單獨(dú)的元素，失去了彼此的聯(lián)系。
形象點(diǎn)說就是removeChild是直接掰斷樹枝，還能繼續(xù)嫁接使用，而innerHTML是把需要的樹葉節(jié)點(diǎn)取下來，再把樹枝燒掉。
ps：僅僅是推測，誰有官方資料請告訴我。
那么removeChild的好處是移除的元素能再次使用，兼容性好，不好的地方是ie會(huì)產(chǎn)生一個(gè)沒用的碎片對象。
而innerHTML的好處是不會(huì)產(chǎn)生多余的碎片對象，方便高效，但在ie被移除的元素基本不能再用，有兼容性問題。
那就可以根據(jù)需要使用不同的方法了，至于防止內(nèi)存泄漏用那個(gè)好，感覺是innerHTML，但沒有更深入研究的話還說不清楚。
使用技巧
- 一般來preview方法都是在onchange中調(diào)用，即選擇文件后立即顯示預(yù)覽。
- 在不需要程序時(shí)最好執(zhí)行一次dispose方法來銷毀程序，防止內(nèi)存泄漏等。
- 利用ImagePreview.TRANSPARENT可以顯示透明圖片，而不需另外隱藏或增加文件。
- 第二個(gè)實(shí)例中的ResetFile是用來重置file控件的，詳細(xì)參考這里file的reset。
而file控件樣式設(shè)置詳細(xì)參考這里的file樣式。
- asp版本使用Persits.Jpeg組件縮放圖片，測試請先安裝該組件。
使用說明
實(shí)例化時(shí)，有兩個(gè)必要參數(shù)，分別是file控件對象和img元素的預(yù)覽顯示對象：
new ImagePreview( file, img );
可選參數(shù)用來設(shè)置系統(tǒng)的默認(rèn)屬性，包括：
屬性: 默認(rèn)值//說明
mode: ImagePreview.MODE,//預(yù)覽模式
ratio: 0,//自定義比例
maxWidth: 0,//縮略圖寬度
maxHeight: 0,//縮略圖高度
onCheck: function(){},//預(yù)覽檢測時(shí)執(zhí)行
onShow: function(){},//預(yù)覽圖片時(shí)執(zhí)行
onErr: function(){},//預(yù)覽錯(cuò)誤時(shí)執(zhí)行
以下在remote模式時(shí)有效
action: undefined,//設(shè)置action
timeout: 0//設(shè)置超時(shí)(0為不設(shè)置)
如果要使用remote模式必須設(shè)置一個(gè)action。
還提供了以下方法：
preview：執(zhí)行預(yù)覽操作；
dispose：銷毀程序。
程序源碼
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2963175-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/7285.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript 圖片預(yù)覽效果 [8] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 9 頁 JavaScript 圖片預(yù)覽效果 [9]
