圖片處理
??????在網頁中有一個預覽圖片的功能,由一個單元格顯示要預覽的圖片,由于實際圖片有大有小,所以要有個函數處理圖片的大小。可以這樣寫
??????
/**//*
?*?設定img的寬,高
?*?img?動態圖片對象
?*?width?單元格寬
?*?height?單元格高
?*/

fitImageSize?=?function(img,?width,?height)?
{
????var?rate?=?img.width?/?img.height;
????var?wh?=?width?/?height;


????if?(rate?>?wh)?
{

????????if?(img.width?>?width)?
{
????????????img.height?=?img.height?*?(width?/?img.width);
????????????img.width?=?width;
????????}
????}

????else?
{

????????if?(img.height?>?height)?
{
????????????img.width?=?img.width?*?(height?/?img.height);
????????????img.height?=?height;
????????}
????}
}??????
??????當圖片動態加載顯示的時候,有一個奇怪的問題,就是,第一次預覽時,圖片實際大小并沒有改變,也就是說,這個函數好像無效了。預覽事件代碼片斷如下:

for(
)?
{

????if(
.)?
{
????????//?是否可以預覽
?????????img.src?=?"url
..";
??????????? // alert(img.src);
????????fitImageSize(img,?view.width,?view.height);
????????img.align?=?"center";
????????document.getElementById(id).appendChild(img);
????}
}
??????而當將alert的注釋去掉以后,圖片將被正常的處理。這應該是alert的時候,js程序被掛起,而圖片繼續在加載,當alert點擊以后,圖片加載已經成功,所以,圖片被正確處理。如果你alert的是img.width,你會看見信息是0。因此,我對程序再做一點改動,用setInterval函數進行圖片的完全加載處理。

for(
)?
{

????if(
)?
{
????????//?是否可以預覽
?????????img.src?=?"url
.";
????????//?alert(img.src);
????????//fitImageSize(img,?view.width,?view.height);
????????//img.align?=?"center";
????????//document.getElementById(id).appendChild(img);

????????preview_interval?=?window.setInterval(function()?
{?loadingImage(img);?},?100);
????}
}
{...coding....}
var?preview_interval;

/**//*
?*?img?加載的圖片對象
?*/

loadingImage?=?function(img)?
{

????if(img.complete)
{
??????????? clearInterval(preview_interval);
??????????? fitImageSize(img,?view.width,?view.height);
?????????? img.align?=?"center";
??????????document.getElementById(id).appendChild(img);
????}
}
??????這樣一來,程序就可以預覽圖片,并且也不再會出現第一次預覽時撐大單元格的現象了。
????? 上面是預覽一張圖片的情況,我還遇到js動態一次性加載多張圖片的情況,解決辦法與此相似。下面的代碼是我處理多張圖(2張為例)的,實際上可以和上面的寫在一起,呵呵,懶的,不去動它了。

/**//*
?*?加載相關圖片
?*/

myClass.prototype.loadAssociateImage?=?function()?
{
????
????//?判斷圖片是否已經被加載過,避免重復加載時不必要的消耗。這里以image數組的長度
????//?作為是否已經加載的判斷。

????if(this.astImage.length?!=?0)?
{
?????????? //?alert('Not?reload');
??????????? return;
??????? }


????for?(var?i?=?0;?i?<?2;?i++)?
{
??????????? this.astImage[i]?=?new?Image();
??????? }
????
?????? this.astImage[0].src?=?this.pic.pic0;
?????? this.astImage[1].src?=?this.pic.pic1;

}


var?my_interval;

/**//*
?*?顯示
?*/

myClass.prototype.create?=?function()?
{
??this.loadAssociateImage();

??my_interval?=?window.setInterval(function?()?
{
????//?變量g是myClass的全局變量,可以當作this看
????var?length?=?g.astImage.length;

????for?(var?i?=?0;?i?<?length;?i++)?
{

????????if?(!g.astImage[i].complete)?
{
????????????break;
????????}

????????else?
{

????????????if?(i?!=?length?-1)?
{
????????????????continue;
????????????}

????????????else?
{
????????????????clearInterval(my_interval);
????????????????//?my?process?now
????????????}
????????}
????}
??
??},?10);
????
}
??????補充一下對setInterval和setTimeout的說明:setInterval是讓js每隔一段時間就運行某一函數一次,從js代碼執行setInterval開始,這樣直到注銷(clearInterval)其為止;setTimeout是在js程序塊執行終止以后,再隔一段時間調用某一函數,該函數只調用一次。
??????


































??????當圖片動態加載顯示的時候,有一個奇怪的問題,就是,第一次預覽時,圖片實際大小并沒有改變,也就是說,這個函數好像無效了。預覽事件代碼片斷如下:











??????????? // alert(img.src);





??????而當將alert的注釋去掉以后,圖片將被正常的處理。這應該是alert的時候,js程序被掛起,而圖片繼續在加載,當alert點擊以后,圖片加載已經成功,所以,圖片被正確處理。如果你alert的是img.width,你會看見信息是0。因此,我對程序再做一點改動,用setInterval函數進行圖片的完全加載處理。






































??????這樣一來,程序就可以預覽圖片,并且也不再會出現第一次預覽時撐大單元格的現象了。
????? 上面是預覽一張圖片的情況,我還遇到js動態一次性加載多張圖片的情況,解決辦法與此相似。下面的代碼是我處理多張圖(2張為例)的,實際上可以和上面的寫在一起,呵呵,懶的,不去動它了。







































































??????補充一下對setInterval和setTimeout的說明:setInterval是讓js每隔一段時間就運行某一函數一次,從js代碼執行setInterval開始,這樣直到注銷(clearInterval)其為止;setTimeout是在js程序塊執行終止以后,再隔一段時間調用某一函數,該函數只調用一次。
posted on 2006-04-24 20:36 howard 閱讀(506) 評論(0) 編輯 收藏 所屬分類: JavaScript