获取图片的实际宽高

最新推荐文章于 2022-11-07 16:30:35 发布

vcxiaohan2

最新推荐文章于 2022-11-07 16:30:35 发布

阅读量866

点赞数

本文链接：https://blog.csdn.net/u011500781/article/details/51790283

版权

1.html5新加属性 naturalWidth (不靠谱而且兼容性有问题)

2.预加载图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <link rel="shortcut icon" href="images/send.png" type="/image/x-icon">
    <title>图片预加载</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        * {
            margin: 0; 
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
        }
        body {
            height: 3rem;
        }
        img {
            width: 200px;
        }
    </style>
</head>
<body>

    <img src="images/123.png">
    <img src="images/456.png">
    <img src="images/789.png">
    <script>
    ;$(function() {
<span style="white-space:pre">	</span>//
        $('img').each(function() {
            getNaturalSize(this, function(w, h) {
                $('body').append('<p>width:'+ w +'height:'+ h +'</p>');
            });
        });


        function getNaturalSize(img, fn) {
            console.log(img.naturalWidth);
            if(img.naturalWidth) {//这属性很怪异(时而有效)
                fn(img.naturalWidth, img.naturalHeight);
            }else {
                var pic = new Image();

                pic.onload = function() {//加载完毕后(建议)
                    fn(pic.width, pic.height);
                }
                pic.src = img.src;//这句放在onload后面(兼容ie8)
            }
        }













    });
    </script>
</body>
</html>