JS基礎篇--搞清Image加載事件(onload)、加載狀態(complete)后，實現圖片的本地

callmewhy 發布于2019-08-20 18:29 / 3943人閱讀

摘要：與介紹只是對象的一個屬性，可以判斷圖片加載完成，不管圖片是不是有緩存而則是這個對象的事件回調，當圖片加載完成后執行綁定的函數。第三次點擊，谷歌瀏覽器結果為瀏覽器結果為。例打印結果第一次點擊，谷歌瀏覽器結果為瀏覽器結果為空。

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代碼：

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) { // basic
            result.url = window.createObjectURL(file) ;
        }else if (window.URL!=undefined) { // mozilla(firefox)
            result.url = window.URL.createObjectURL(file) ;
        }else if (window.webkitURL!=undefined) { // webkit or chrome
            result.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) { // basic
            result.url = window.createObjectURL(file) ;
        }else if (window.URL!=undefined) { // mozilla(firefox)
            result.url = window.URL.createObjectURL(file) ;
        }else if (window.webkitURL!=undefined) { // webkit or chrome
            result.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";
        });    
    }   
}

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

云服務器 GPU云服務器 js實現數據的懶加載圖片 js實現圖片預加載抓取js加載后的網頁 php 加載本地圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84572.html

Javascript實現圖片的預加載功能

摘要：本文同步自我得博客最近要用做一個動畫功能，為了確保動畫在播放的時候能夠順利和平滑，我需要對所用到的圖片素材進行預加載，下面跟大家分享一下我實現這個功能的過程單圖片預加載目前最常見的一種實現方式如下接下來可以使用圖片了接下來可以使用圖片了首先本文同步自我得博客：http://www.joeray61.com 最近要用javascript做一個動畫功能，為了確保動畫在播放的時候能夠順利和...

KavenFan 2019-08-21 10:19 評論0 收藏0
簡記html中常用的文檔加載方法

摘要：簡介最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。此狀態為樹構建完成后觸發，和一樣，但在其之后觸發兼容性以上可用方法當瀏覽器窗口，文檔或其資源將要卸載時，會觸發事件。沒有賦值時，該事件不做任何響應。簡介最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。先來一段Html，作為我們研究的基礎吧。 ...

gaosboy 2019-08-01 17:19 評論0 收藏0
簡記html中常用的文檔加載方法

摘要：簡介最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。此狀態為樹構建完成后觸發，和一樣，但在其之后觸發兼容性以上可用方法當瀏覽器窗口，文檔或其資源將要卸載時，會觸發事件。沒有賦值時，該事件不做任何響應。簡介最近對于文檔加載方法有了新的理解，因此整理成一片簡記，方便以后進行查閱。先來一段Html，作為我們研究的基礎吧。 ...

shenhualong 2019-08-20 18:29 評論0 收藏0
前端知識普及之頁面加載

摘要：如果你的文件涉及操作，可以直接在里面添加回調函數，或者說基本上我們的文件都可以寫在里面進行調用其實，這和我們將文件放在底部，在上面加以及異步加載文件的效果是一樣一樣的。如果大家想繼續看下面的內容的話，有一個要求，就是回答我一個問題:你這樣寫過代碼嗎？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 評論0 收藏0
拼圖小游戲

摘要：學習小游戲開發中最常用的碰撞檢測狀態監控刷新保持狀態的處理方法。保存縮略圖的信息是當游戲結束后顯示源縮略圖時，根據中的內容展示圖片。如果您想要綜合使用javascript中canvas、原生拖拽、本地存儲等多種技術完成一個有趣的項目，那么這篇博文將非常適合您，水平有限，還望感興趣的開發人員給予更多代碼優化建議。 1 簡介和源碼該項目中的拼圖小游戲使用javascript原創，相比于...

svtter 2019-08-23 11:51 評論0 收藏0