jquery 获取图片高宽

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。获取图片的高宽是前端开发中常见的需求，通常用于布局调整、响应式设计等场景。

类型

获取图片高宽的方法主要有以下几种：

使用原生 JavaScript：
使用原生 JavaScript：
使用 jQuery：
使用 jQuery：

应用场景

响应式设计：根据图片的高宽调整布局。
图片裁剪和缩放：在上传图片前获取其原始尺寸，以便进行后续处理。
动态加载图片：根据图片的高宽动态调整加载策略。

遇到的问题及解决方法

问题：为什么使用 jQuery 获取图片高宽时返回值为 0？

原因：

图片尚未完全加载，导致获取的尺寸为 0。
图片路径错误，图片未正确加载。

解决方法：

确保图片完全加载：
确保图片完全加载：
检查图片路径：
检查图片路径：

示例代码

以下是一个完整的示例，展示了如何使用 jQuery 获取图片的高宽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Image Dimensions with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/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>

通过上述方法，你可以轻松地获取图片的高宽，并根据需要进行相应的处理。