Skip to content

img标签的特点

Jump to bottom Edit New page
LYF edited this page Oct 17, 2016 · 2 revisions

  1. img标签的width和height属性值单位为px，如果设置了其他非px单位，则相当于parseInt(width | height) + "px"

  2. img标签设置宽高属性的一个，则另外一个会按照比例自动赋值。关于尺寸计算见img 标签尺寸计算

  3. 如果明确地知道img的大小，则最好设置上width和height，以减少重绘

  4. new Image()和document.createElement('img')两者没什么区别！！！

  5. new Image()和document.createElement('img')创建的Node都可用onload和onerror

  6. 如果一张图已经下载好了，通过 new Image()和document.createElement('img')新创建了一个img Node，src为已经下载好了的图片，则这个图片不会再次下载！！！

  7. 判断img Node是否borken

/*
 获取broken的图片
   注意必须写在load回调中，不然的话
   在网速慢 + 图片大的情况下，会导致某些大图也计入broken
   
*/

window.addEventListener('load', function(){
	
      var imgs = getByTag('img'), brokens = [], i = 0, img;
      
      while( img = imgs[i++] ){
      	// 在网速慢，图片大时，大图片未加载出来时
      	// 其 img.naturalWidth === 0 && img.naturalHeight === 0 
        if( !img.complete || ( img.naturalWidth === 0 && img.naturalHeight === 0 ) ){
          brokens.push(img);
        }
      }
	
      console.log('加载错误的图片有：', brokens);
	
}, false);

上述结论的测试case

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片</title>
<style>html,body{font-size: 100px;}</style>
</head>
<body>
<img src="http://a.diaox2.com/cms/sites/default/files/20160908/goodthing/AAA.jpg" height="200rem">
<button id="btn1">下载同一张图片(Image)</button>
<button id="btn2">下载另一张图片(Image)</button>
<button id="btn3">下载同一张图片(img)</button>
<button id="btn4">下载另一张图片(img)</button>
<script>
    btn1.onclick = function(){
        var image = new Image();
        image.src = "http://a.diaox2.com/cms/sites/default/files/20160908/goodthing/AAA.jpg";
        var text = this.textContent;
        console.log(text + ' ' + image.nodeName);
        document.body.appendChild(image);
        image.onload = function(e){
            console.log(e.type);
            console.log(text + ' success');
        }
    }

    btn2.onclick = function(){
        var image = new Image();
        image.src = "http://a.diaox2.com/cms/sites/default/files/20160903/firstpage/7375banner.jpg";
        var text = this.textContent;
        console.log(text + ' ' + image.nodeName);
        document.body.appendChild(image);
        image.onload = function(e){
            console.log(e.type);
           console.log(text + ' success');
        }
    }

    btn3.onclick = function(){
        var img = document.createElement('img');
        img.src = "http://a.diaox2.com/cms/sites/default/files/20160908/goodthing/AAA.jpg";
        var text = this.textContent;
        console.log(text + ' ' + img.nodeName);
        document.body.appendChild(img);
        img.onload = function(e){
            console.log(e.type);
           console.log(text + ' success');
        }
    }

    btn4.onclick = function(){
        var img = document.createElement('img');
        img.src = "http://a.diaox2.com/cms/sites/default/files/20160903/firstpage/7375banner.jpg";
        var text = this.textContent;
        console.log(text + ' ' + img.nodeName);
        document.body.appendChild(img);
        img.onload = function(e){
            console.log(e.type);
           console.log(text + ' success');
        }
    }
</script>
</body>
</html>
  1. 做图片懒加载时，img在初始化的时候不要设置src属性，因为即使设置 src='' 浏览器也会尝试加载图片。
Add a custom footer
Add a custom sidebar
Clone this wiki locally