以前作過這樣一個需求,要讓商家頁的商家圖片按照圖片外面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節點中便可
javascript
<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或者是緩存的問題嗎?先改寫一下代碼,html
<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 ,和之前是否加載過該張圖片沒有關係,即和緩存沒有關係!能夠寫以下的函數來作到各個瀏覽器中預加載圖片的兼容性。java
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瀏覽器