onload與complete介紹

complete只是HTMLImageElement對象的一個屬性，可以判斷圖片加載完成，不管圖片是不是有緩存；而onload則是這個Image對象的load事件回調，當圖片加載完成后執行onload綁定的函數。

給下面一個例子，解釋下：

document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png"; if(img.complete) { console.log('dd'); } img.onload = function() { console.log('ff'); } }

打印結果：
第一次點擊，谷歌瀏覽器結果為：dd;IE瀏覽器結果為：ff。
第二次點擊，谷歌瀏覽器結果為：dd,ff;IE瀏覽器結果為：ff。
第三次點擊，谷歌瀏覽器結果為：dd,ff;IE瀏覽器結果為：dd,ff。
...

例2：

document.getElementById('load').onclick = function() { var img = new Image(); if(img.complete) { console.log('dd'); } img.onload = function() { console.log('ff') } img.src="images/avatar.png"; }

打印結果：
第一次點擊，谷歌瀏覽器結果為：dd,ff;IE瀏覽器結果為：ff。
第二次點擊，谷歌瀏覽器結果為：dd,ff;IE瀏覽器結果為：ff。
第二次點擊，谷歌瀏覽器結果為：dd,ff;IE瀏覽器結果為：ff。
...

例3：

document.getElementById('load').onclick = function() { var img = new Image(); if(img.complete) { console.log('dd'); } img.onload = function() { console.log('ff') } img.src=""; }

打印結果：
第一次點擊，谷歌瀏覽器結果為：dd;IE瀏覽器結果為：空。
第二次點擊，谷歌瀏覽器結果為：dd;IE瀏覽器結果為：空。
第二次點擊，谷歌瀏覽器結果為：dd;IE瀏覽器結果為：空。
...

根據結果得出：對于 complete 屬性來講，IE是根據圖片是否顯示過來判斷，就是說當加載的圖片顯示出來后，complete 屬性的值才為 true ，否則一直是 false ，和以前是否加載過該張圖片沒有關系，即和緩存沒有關系！但是其它瀏覽器表現出來的確不一樣，只要以前加載過該圖，瀏覽器有緩存，也無論src是否有值，成功與否，只要獲取到image，就可以執行，complete 就為 true。所以這個complete在不同瀏覽器中結果是不一樣的。

本地圖片預覽

首先先寫下布局，html代碼：

<div class="centerView"><div class="localPreview"><img id="showViewImg"/></div><a class="inputParent" href="javascript:void(0)"><i>點擊上傳文件</i><input type="file" id="filePath" onchange="getCurrFile()"/></a> </div>

css代碼：

.centerView{width:150px; } .localPreview{position:relative;width:150px;height:150px;line-height:150px;text-align:center;background:#ccc; } .localPreview img{position: relative;vertical-align: middle; } .inputParent{position:relative;display:block;margin:10px auto;cursor:pointer;width:80px;height:30px;line-height:30px;background:#27bb6e;text-align: center;font-size:12px;color:#fff; } .inputParent i{font-style: normal;color:#fff; } .inputParent #filePath{position:absolute;width:100%;height:100%;top:0;left:0;filter:alpha(opacity=0); opacity: 0; }

靜態頁面的效果如圖所示：

梳理一下思路，我們要實現圖片的本地預覽，需要如下幾點：
1.點擊file上傳文件按鈕后，選中圖片后，獲得圖片的路徑。
2.根據圖片實例一個new Image()得到圖片的實際的大小。
3.得到圖片的實際大小，再根據顯示區域的寬高來處理圖片的寬高，讓其自適應于父元素區域中。
4.在IE9以及低版本瀏覽器中需要使用濾鏡來實現圖片的預覽。

根據以上幾點我們就寫如下代碼，首先我們先創建一個構造函數。

function DealPic(width,height){this.oriWidth = width;this.oriHeight = height; }

這個oriWidth與oriHeight指的是父區域的寬高，也就是圖片要跟該寬高進行比較的值。

接下來實現一個getObjectURL，干嘛的呢，如果支持file對象支持files，就返回只包含url的一個對象，如果是IE9以及低版本瀏覽器返回的對象中還包括濾鏡圖片的原始大小。

DealPic.prototype.getObjectURL = function(fileObj){var result = {} ;var file;if(fileObj.files){file = fileObj.files[0];if (window.createObjectURL!=undefined) { // basicresult.url = window.createObjectURL(file) ;}else if (window.URL!=undefined) { // mozilla(firefox)result.url = window.URL.createObjectURL(file) ;}else if (window.webkitURL!=undefined) { // webkit or chromeresult.url = window.webkitURL.createObjectURL(file) ;}}else{var hiddenAlphaImageWidth,hiddenAlphaImageHeight;var hiddenAlphaImage = document.createElement('img');document.body.appendChild(hiddenAlphaImage);fileObj.select();fileObj.blur();result.url = document.selection.createRange().text;hiddenAlphaImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)";hiddenAlphaImage.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = result.url;//但是當濾鏡使用的圖片超過10M大小，使用上面的代碼頁面會報錯，說hiddenAlphaImage出現未指明的錯誤；//解決辦法就是使用下面的注釋的方式，注釋上面的兩行代碼//使用下面代碼濾鏡圖片超過10M后本地預覽不了，通過這個濾鏡得到的圖片的寬高始終是28*30//hiddenAlphaImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + result.url + "\")"; result.width = hiddenAlphaImage.offsetWidth;result.height = hiddenAlphaImage.offsetHeight;if(hiddenAlphaImage.parentNode){hiddenAlphaImage.parentNode.removeChild(hiddenAlphaImage);}}return result; }

在IE低版本瀏覽器為什么要這樣處理呢，如果我們要得到濾鏡圖片的元素大小，首先得創建一個img元素，然后通過IE瀏覽器的document.selection.createRange().text得到圖片路徑，然后給這個img元素進行設置，這兒關鍵得用到filter的sizingMethod屬性。

sizingMethod屬性：可選值，設置或檢索的方式來顯示一個圖像在對象邊界顯示方式。有三個值：

• crop：裁剪圖像以適應對象的尺寸；
• image：默認值，擴大或減少對象的邊界,以適應圖像的尺寸；
• scale：伸展或收縮圖像填充對象的邊界；

這兒使用image才能得到濾鏡圖片的原始大小。然后返回。
如果一開始只是把這個url返回回去，沒有返回濾鏡圖片的實際大小，就不能達到自適應的效果。

當然上面獲取圖片的url用到的是window.createObjectURL，也可以用FileReader.readAsDataURL讀取指定Blob或File的內容。
簡單實現一下：

if (input.files && input.files[0]) {var reader = new FileReader();reader.onload = function (e) { var showImg = document.getElementById('showViewImg');showImg.src = e.target.result;showImg.style.width = '150px';showImg.style.height = '80px'; };reader.readAsDataURL(input.files[0]); }

這兒就不詳細介紹了，只是這兒得到的url是base64編碼的字符串，所以我一般還是選中上面第一種方式。

接下來就是圖片自適應的比較方法：

DealPic.prototype.getPicResult = function(targetWidth,targetHeight,callback){if(this.oriWidth / this.oriHeight > targetWidth / targetHeight){var th = this.oriHeight;var tw = this.oriHeight / targetHeight * targetWidth; }else{var tw = this.oriWidth;var th = this.oriWidth / targetWidth * targetHeight;}if(callback){callback(tw,th);} }

這兒就不細說了。

最后就是綁定到file按鈕上的change事件的方法了。

function getCurrFile(){var fileObj = document.getElementById('filePath');var showImgObj = document.getElementById('showViewImg');var newPicObj = new DealPic(150,150);var resultFileObj = newPicObj.getObjectURL(fileObj);if(fileObj.files){var newImg = new Image();newImg.onload = function(){newPicObj.getPicResult(newImg.width,newImg.height,function(tw,th){showImgObj.style.width = tw + 'px';showImgObj.style.height = th + 'px';}); }newImg.src = resultFileObj.url;showImgObj.setAttribute('src',resultFileObj.url);}else{showImgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";showImgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = resultFileObj.url;//IE9低版本不設置圖片src會顯示裂圖，所以設置一個透明圖片或者base64的透明圖片showImgObj.setAttribute('src','./images/transparent.png');//showImgObj.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';newPicObj.getPicResult(resultFileObj.width,resultFileObj.height,function(resw,resh){showImgObj.style.width = resw + 'px';showImgObj.style.height = resh + 'px';}); } }

最后的js代碼總結：

function DealPic(width,height){this.oriWidth = width;this.oriHeight = height; }DealPic.prototype.getObjectURL = function(fileObj){var result = {} ;var file;if(fileObj.files){file = fileObj.files[0];if (window.createObjectURL!=undefined) { // basicresult.url = window.createObjectURL(file) ;}else if (window.URL!=undefined) { // mozilla(firefox)result.url = window.URL.createObjectURL(file) ;}else if (window.webkitURL!=undefined) { // webkit or chromeresult.url = window.webkitURL.createObjectURL(file) ;}}else{var hiddenAlphaImageWidth,hiddenAlphaImageHeight;var hiddenAlphaImage = document.createElement('img');document.body.appendChild(hiddenAlphaImage);fileObj.select();fileObj.blur();result.url = document.selection.createRange().text;hiddenAlphaImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)";hiddenAlphaImage.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = result.url;//但是當濾鏡使用的圖片超過10M大小，使用上面的代碼頁面會報錯，說hiddenAlphaImage出現未指明的錯誤；//解決辦法就是使用下面的注釋的方式，注釋上面的兩行代碼//使用下面代碼濾鏡圖片超過10M后本地預覽不了，通過這個濾鏡得到的圖片的寬高始終是28*30//hiddenAlphaImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + result.url + "\")"; result.width = hiddenAlphaImage.offsetWidth;result.height = hiddenAlphaImage.offsetHeight;if(hiddenAlphaImage.parentNode){hiddenAlphaImage.parentNode.removeChild(hiddenAlphaImage);}}return result; }DealPic.prototype.getPicResult = function(targetWidth,targetHeight,callback){if(this.oriWidth / this.oriHeight > targetWidth / targetHeight){var th = this.oriHeight;var tw = this.oriHeight / targetHeight * targetWidth; }else{var tw = this.oriWidth;var th = this.oriWidth / targetWidth * targetHeight;}if(callback){callback(tw,th);} }function getCurrFile(){var fileObj = document.getElementById('filePath');var showImgObj = document.getElementById('showViewImg');var newPicObj = new DealPic(150,150);var resultFileObj = newPicObj.getObjectURL(fileObj);if(fileObj.files){var newImg = new Image();newImg.onload = function(){newPicObj.getPicResult(newImg.width,newImg.height,function(tw,th){showImgObj.style.width = tw + 'px';showImgObj.style.height = th + 'px';}); }newImg.src = resultFileObj.url;showImgObj.setAttribute('src',resultFileObj.url);}else{showImgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";showImgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = resultFileObj.url;//IE9低版本不設置圖片src會顯示裂圖，所以設置一個透明圖片或者base64的透明圖片showImgObj.setAttribute('src','./images/transparent.png');//showImgObj.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';newPicObj.getPicResult(resultFileObj.width,resultFileObj.height,function(resw,resh){showImgObj.style.width = resw + 'px';showImgObj.style.height = resh + 'px';}); } }

最后本地預覽的效果如圖所示：

轉載于:https://www.cnblogs.com/moqiutao/p/7283129.html

總結

以上是生活随笔為你收集整理的搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。