image的加載事件(onload)和加載狀態(complete)

以前作過這樣一個需求，要讓商家頁的商家圖片按照圖片外面box的大小等比例縮放。以前的想法是在頁面中先輸出圖片的src，而後在頁面底部初始化js，而後在js中寫相應的可使圖片按照box的大小等比例縮放的函數。要實現圖片的等比例縮放要作到如下幾點，

第一，獲得圖片的width和height
第二，比較圖片的width和height與box的width的height的大小，共有四種狀況，

# 若是圖片的width和height均小於box的width和height，那麼直接讓圖片上下左右居中便可，
# 若是圖片的width大於box的width，height小於box的height,讓圖片按照寬度等比例縮放，而後垂直居中，
# 若是圖片的height大於box的height,width小於box的width,讓圖片按照高度等比例縮放，而後左右居中，
# 若是圖片的width和height均大於box的width和height,那麼分別計算圖片的widht和height和box的width和height的比，用較小的值做爲縮放的比例，而後上下左右居中便可。

第三，將獲得的圖片放入對應的img節點中便可

 

    第二步和第三步都比較好實現，幾個if..else循環便可搞定，可是對於第一步如何得到圖片的width和height是個須要解決的關鍵性問題，以前 的想法是在頁面中直接輸入圖片的src，而後再將圖片進行等比例縮小，可是這樣存在了一個問題，就是不管如何，圖片都會先展現出來原來的大小，而後再等比 例縮小，這樣在體驗上很是很差，因此首先考慮到能夠先讓圖片visiblility:hidden,而後在js計算完圖片的大小的時候再讓圖片 visibility:visible，這樣雖然能夠實現效果可是存在必定的限制，由於在頁面的代碼所有加載完畢後，圖片不必定加載完畢，若是是一張較小 的圖片，那麼這種方法能夠很幸運的得到原始圖片的高度和寬度，可是若是圖片很是大，在圖片尚未加載完畢，代碼即運行結束，這樣得到的圖片的大小即不是真 實的值，因此如今存在的一個問題就是如何在圖片徹底加載完畢以後再得到圖片的真實的高度和寬度。咱們這時天然而然的想到了img對象的onload方 法，img.onload是當一張圖片被加載完成後所觸發的事件。下面看一個例子，

<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
    function addImg(isrc)
    {
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
    }
</script>

 

當頁面打開後，點擊按鈕後，會顯示tt.jpg，可是若是重複點擊會怎樣呢？在IE中，除了第一次加載 圖片時候顯示正常，以後再點擊就沒有反應了，刷新也同樣。FF中，每點擊一次加載一張該圖片。而這是什麼緣由呢？是由於在IE中只執行了一次onload或者是緩存的問題嗎？先改寫一下代碼，

<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
    function addImg(isrc)
    {
        var Img = new Image();
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
</script>

如今再點擊圖片，就正常了，今後可見不是由於IE沒有觸發onload事件，而是由於IE中加載緩衝區的速度太快，以致於沒有運行到img.onload 的時候，圖片已經被加載完畢了。所以，能夠先告訴瀏覽器如何處理這張圖片，而後再製定這張圖片的來源。通常狀況下，能夠用complete來判斷圖片是否 加載完畢。對於 complete 屬性來說，IE是根據圖片是否顯示過來判斷，就是說當加載的圖片顯示出來後，complete 屬性的值才爲true ，不然一直是false ，和之前是否加載過該張圖片沒有關係，即和緩存沒有關係！能夠寫以下的函數來作到各個瀏覽器中預加載圖片的兼容性。

var imgLoad = function (url) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};

文章來自：http://blog.sina.com.cn/s/blog_73c8ed1901013k70.html