最近寫項目的時候遇到一個需求,頁面需要加載一些圖片,并為圖片動態設置寬高,怎么去做呢,小呆先舉例說明一下自己遇到的問題。

  1. 圖片未加載完,圖片的尺寸為0
  2. 圖片第一次動態改變寬高后,第二次動態改變時,尺寸已經不是原始尺寸(為第一次動態設定的css)
  3. 圖片原始尺寸的獲取

怎么解決呢?接著往下看

判斷圖片是否加載完成

第一步肯定是需要判斷圖片是否加載完成,如果未加載完成,獲取不到圖片的尺寸,所以需要確保我們取圖片的尺寸時,圖片是加載完成的。

function getImageSize (url,callback){
    var img = new Image();
    img.src = url;

// 如果圖片被緩存,則直接返回緩存數據
    if(img.complete){
        callback(img.width, img.height);
    }else{
        // 完全加載完畢的事件
        img.onload = function(){
            callback(img.width, img.height);
        }
    }
}

我們通過new Image()方式來創建一個圖片對象,completeImage對象的一個屬性,它可以返回瀏覽器是否已完成對圖像的加載。如果加載完成,則返回 true,否則返回 fasle。如果圖片未加載完成(表示為第一次加載),我們則通過Image對象的onload事件對圖片進行加載,然后返回圖片的原始尺寸

動態設置圖片

這一步我想就簡單多了,只要我們每次用圖片的原始尺寸去和動態設置的尺寸做對比就好了,如果比動態設置的尺寸大,則按比例縮放,如果比動態設置的尺寸小,則不做任何處理。

function imagesShow (Width){
//參數Width為動態需要設置的寬度
    $('.detaile-imagesbox>img').each(function(index,el){
        var imgSrc = $(this).attr("src"),
            self = $(this);
        _this.getImageWidth(imgSrc,function(w,h){
            if(w>Width){
                self.css('width',Width);
            }
        });
    })
}

如果你也遇到了這類問題,不妨用上面小呆的方法試試喲!