jquery得到图片的大小

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在处理图片大小时，jQuery 可以帮助我们轻松获取图片的宽度和高度。

类型

获取图片大小的方法主要有两种：

通过 width() 和 height() 方法：适用于已经加载完成的图片。
通过 attr() 方法：适用于获取图片标签中的 width 和 height 属性值。

应用场景

在网页开发中，获取图片大小的应用场景包括但不限于：

图片懒加载：根据图片大小决定加载策略。
图片裁剪和缩放：根据图片大小进行相应的处理。
响应式设计：根据图片大小调整布局。

示例代码

通过 `width()` 和 `height()` 方法获取图片大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Get Image Size</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/your/image.jpg" alt="Sample Image">
    <script>
        $(document).ready(function() {
            var width = $('#myImage').width();
            var height = $('#myImage').height();
            console.log('Width: ' + width + ', Height: ' + height);
        });
    </script>
</body>
</html>

通过 `attr()` 方法获取图片大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Get Image Size</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/your/image.jpg" width="300" height="200" alt="Sample Image">
    <script>
        $(document).ready(function() {
            var width = $('#myImage').attr('width');
            var height = $('#myImage').attr('height');
            console.log('Width: ' + width + ', Height: ' + height);
        });
    </script>
</body>
</html>

常见问题及解决方法

问题：为什么有时获取到的图片大小是 0？

原因：图片可能还没有完全加载完成，导致获取到的大小为 0。

解决方法：确保在图片加载完成后再获取其大小。可以使用 $(window).on('load', function() {...}) 或者在图片标签上添加 onload 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Get Image Size</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/your/image.jpg" alt="Sample Image">
    <script>
        $(window).on('load', function() {
            var width = $('#myImage').width();
            var height = $('#myImage').height();
            console.log('Width: ' + width + ', Height: ' + height);
        });
    </script>
</body>
</html>

通过以上方法，可以确保在图片加载完成后获取其大小，避免出现大小为 0 的情况。