<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    沒話說了

    所學甚淺,所知甚少
    隨筆 - 15, 文章 - 2, 評論 - 15, 引用 - 0
    數據加載中……

    圖片處理

    ??????在網頁中有一個預覽圖片的功能,由一個單元格顯示要預覽的圖片,由于實際圖片有大有小,所以要有個函數處理圖片的大小。可以這樣寫
    ??????
    /*
    ?*?設定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程序塊執行終止以后,再隔一段時間調用某一函數,該函數只調用一次。

    posted on 2006-04-24 20:36 howard 閱讀(506) 評論(0)  編輯  收藏 所屬分類: JavaScript


    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 亚洲不卡无码av中文字幕| 亚洲AV无码乱码在线观看富二代 | 亚洲色图综合在线| 国产中文字幕在线免费观看| 亚洲成a人片在线网站| 国产三级免费电影| 四虎国产精品永久免费网址| 亚洲人成网站999久久久综合| 亚洲国产精品尤物yw在线| 最好看最新的中文字幕免费| 亚洲熟伦熟女专区hd高清| 亚洲中文字幕在线乱码| 成人免费毛片内射美女-百度| 一级毛片试看60分钟免费播放| 亚洲无砖砖区免费| 久久亚洲AV无码西西人体| 啦啦啦中文在线观看电视剧免费版 | 亚洲AV永久精品爱情岛论坛| 女人张腿给男人桶视频免费版| baoyu777永久免费视频| 亚洲欧美日韩国产精品一区| 亚洲AV乱码一区二区三区林ゆな| 国产一级淫片免费播放| 国产91免费视频| a毛片免费全部在线播放**| 亚洲成a人片在线观看天堂无码 | 国产亚洲一卡2卡3卡4卡新区| 亚洲国产综合专区电影在线| 亚洲AV伊人久久青青草原| 7723日本高清完整版免费| 好吊色永久免费视频大全 | 偷自拍亚洲视频在线观看| 亚洲人成7777影视在线观看| 亚洲综合AV在线在线播放| 国产精品免费小视频| 在线看片免费不卡人成视频| 久久久久国产精品免费网站| 黄色网页在线免费观看| 国产成人人综合亚洲欧美丁香花| 456亚洲人成在线播放网站| 精品日韩亚洲AV无码|