需求：

要保證當所有圖片載入成功以後再去執行列印方法

最終程式碼的實現：

printMail = () => {
    this.btnDisplay='none';
    //獲取iframe的window物件
    let iframe = document.getElementsByClassName('wea-email-content-iframe')[0].contentWindow;
    let img_length = iframe.document.getElementsByTagName('img').length;
    let img_success = 0;
    let img_erro = 0;
    let img_all = 0;
    let images = iframe.document.getElementsByTagName('img');
    if(img_length === 0){
      setTimeout(()=>{
        window.print();
        this.btnDisplay='block';
      },100);
    }else if(img_length > 0){
      for(let image of images){
        let oneImg = new Image(); 
        oneImg.src=image.src;
        oneImg.onload=()=>{
          img_success++;
          img_all ++;
          if(img_all == img_length){
            setTimeout(()=>{
              window.print();
              this.btnDisplay='block';
            },100);
          }
        };
        oneImg.onerror=()=>{
          img_erro++;
          img_all ++;
          if(img_all == img_length){
            setTimeout(()=>{
              window.print();
              this.btnDisplay='block';
            },100);
          }
        };      
      }
    }
  }
 

由此開始了今天知識點的探索【解析一下程式碼中的知識點哈】：

1、建立一個Image物件：var a=new Image();    定義Image物件的src: a.src=”xxx.gif”;    這樣做就相當於給瀏覽器快取了一張圖片。

需要注意的是：src 屬性一定要寫到 onload 的後面，否則程式在 IE 中會出錯。（剛看見，跑去改bug...）

可以通過Image物件的complete 屬性來檢測影象是否載入完成（每個Image物件都有一個complete屬性，當影象處於

裝載過程中時，該屬性值false,當發生了onload、onerror、onabort中任何一個事件後，則表示影象裝載過程結束（不管成

沒成功），此時complete屬性為true）

var img = new Image();  
img.src = oImg[0].src = this.src.replace(/small/,"big");  
oDiv.style.display = "block";  
img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})  

注：

ie 火狐等大眾瀏覽器均支援 Image物件的onload事件。

ie8及以下、opera 不支援onerror