<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JQ gets the real width and height of the picture</title>
<script>window.jQuery || document.write(unescape("%3Cscript src='http://libs.baidu.com/jquery/1.10.1/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); </script>
<style type="text/css">
#image{ width: 200px; height: 150px;}
</style>
</head>
<body>
<img src="aaa.jpg" width="400" height="300" id="image">
<script type="text/javascript">
$(function(){
var imgSrc = $("#image").attr("src");
getImageWidth(imgSrc,function(w,h){
console.log({width:w,height:h});
});
});
function getImageWidth(url,callback){
var img = new Image();
img.src = url;
// If the image is cached, return the cached data directly
if(img.complete){
callback(img.width, img.height);
}else{
// fully loaded event
img.onload = function(){
callback(img.width, img.height);
}
}
}
</script>
</body>
</html>
Effect picture: