Knowledge point 1

If var img = new Image (100, 100) and img.src = 1.png are written, the IMG can be cached into the browser, which is often used for image preloading.

Knowledge point 2

html code:

<img src='1.png' style="width:400px" />

js code:

var imgW = document.getElementsByTagName('img')[0].style.width;

In order to get the width and height of an image, the above method must have style= "width:400px".

Knowledge point 3

html code:

<style>
img{ padding:20px;border:1px solid red;}
</style>
<img src='1.png' style="width:400px" />

js code:

window.onload = function(){
    var img = document.getElementsByTagName('img')[0], 
    imgOffsetWidth = img.offsetWidth,  //442px
    imgClientWidth = img.clientWidth;  //440px;
}

In fact, offsetWidth gets the value of width + padding + border, and clientWidth gets the value of width + padding. But it's worth noting that if style = "width:400px" is removed, then they get the width of the real picture.

Knowledge point 4

html code:

<img src='1.png' />

js code:

//naturalWidth is only for Firefox/IE9/Safari/Chrome/Opera browsers
window.onload = function(){
    var img = document.getElementsByTagName('img')[0];
    nWidth = img.naturalWidth     //Real width of picture
    nHeight = img.naturalHeight   //Real Height of Picture
}

naturalWidth and naturaHeight are both used to get the true width and height of the image, but they are only suitable for browsers above IE9, so other methods should be used for browsers below IE9.

Knowledge point 5

html code:

<img src='1.png' width=400/>

js code:

window.onload = function(){
    var img = document.getElementById('ii')
    alert(img.width)  //400
}

In this way, we can get the value of width=400 set to the img tag, but if we don't set width=400 in the tag, then img.width gets the real width of the image.

Knowledge point 6

html code:

No img tag

js code:

<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script type="text/javascript">
    var img = new Image();
    img.src = "1.jpg";
    $(img).appendTo("body")
</script>

This also generates image tags.

Knowledge point 7

html code:

<img src='1.png' id='ii'/>

js code:

// Input img object, get image width and height through callback function
function getImgNaturalDimensions(img, callback) {
    var nWidth, nHeight;
    if (img.naturalWidth) { // Modern browsers, this is a little questionable, how to ensure that the picture has been fully loaded, need to be optimized
        nWidth = img.naturalWidth;
        nHeight = img.naturalHeight;
    } else { // IE6/7/8
        var imgae = new Image();
        image.src = img.src;
        image.onload = function() {
            callback(image.width, image.height);
        }
    }
    return [nWidth, nHeight]
}

var img = document.getElementByID('ii');
getImgNaturalDimensions(img , function( arr ){
    alert(arr[0])  //image width
    alert(arr[1])  //Picture height
})


//If there is only the path of the picture, the usage is:
function getImgNaturalDimensions(src, callback) {
    var nWidth, nHeight

    var imgae = new Image()
    image.src = src;
    image.onload = function() {
        callback(image.width, image.height);
    }
    return [nWidth, nHeight];
}

getImgNaturalDimensions('1.png' , function( arr ){
    alert(arr[0])  //image width
    alert(arr[1])  //Picture height
})

Above is the encapsulation method to get the size of the picture. Note that any method to get the size of the picture above must have a prerequisite, that is, the picture must be loaded, otherwise the acquisition is 0, 0.

Inquiry problem

If you add padding, border and other styles to img tags, how about the results?

Reference link:

http://www.cnblogs.com/koukouyifan/p/4066564.html
http://blog.csdn.net/jimmyhandy/article/details/48654223
http://blog.csdn.net/isaisai/article/details/52467738
http://www.tuicool.com/articles/RRbmMr