js判断图片加载完成后获取图片实际宽高

通常，我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度，但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高，这显然在有些时候不是我们想要的结果，那么有没有一种方法来获取这样的实际宽高呢？答案是有的。下面的代码就能解决这样的问题：

<img src="01.jpg" id="test" width="250px">

js code:

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
    imgSize.call(_test);
}
function imgSize(){
   var imgObj = new Image();
   imgObj.src = this.src;
   alert(imgObj.width + "\n" + imgObj.height);
}

如果想在其他方法中调用这个实际的宽高，应该将alert(imgObj.width + "\n" + imgObj.height);改为return imgObj，然后是调用的方法：

window.onload = function(){
        function a(){
            var real= imgSize.call(_test);
            var realwidth = real.width;
            alert(realwidth);
        }
        a();
        }    

以上方法过于繁琐，经过本人的提炼，简写如下：

window.onload = function(){
        var _test = document.getElementById("test");    //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
        var imgObj = new Image();
        imgObj.src = _test.src;       //若是jq，则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
        alert(imgObj.width);
    }

这样，就可以在其他方法里直接调用图片的实际宽高了。

 

本文出自：http://www.51xuediannao.com/qd63/index.php/page-2-71-1.html  感谢！

 

转载于:https://www.cnblogs.com/tnnyang/p/4815995.html