img的等待缓存事件

需求：

要保证当所有图片加载成功以后再去执行打印方法

最终代码的实现：

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事件

安利dom的Event事件：http://www.w3school.com.cn/jsref/dom_obj_event.asp

2、一直想整理一下循环便利的知识，先放一个站点：https://segmentfault.com/a/1190000013034098

3、iframe.contentWindow:http://www.runoob.com/jsref/prop-frame-contentwindow.html

img的等待缓存事件

猜你喜欢