jquery 获取图片实际尺寸

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。获取图片的实际尺寸是指获取图片在页面上实际显示的宽度和高度，而不是图片本身的原始尺寸。

类型

获取图片实际尺寸的方法主要有以下几种：

使用 width() 和 height() 方法：这些方法可以直接获取元素的宽度和高度。
使用 attr() 方法：获取图片的 width 和 height 属性。
使用原生 JavaScript：通过 getBoundingClientRect() 方法获取元素的边界矩形。

应用场景

获取图片实际尺寸的应用场景包括：

响应式设计：根据图片的实际尺寸调整布局。
动态加载图片：根据图片的实际尺寸进行懒加载或预加载。
图片裁剪和缩放：根据实际尺寸进行图片处理。

示例代码

以下是使用 jQuery 获取图片实际尺寸的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取图片实际尺寸</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="示例图片">

    <script>
        $(document).ready(function() {
            var img = $('#myImage');
            var width = img.width();
            var height = img.height();

            console.log('图片实际宽度: ' + width);
            console.log('图片实际高度: ' + height);
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么使用 jQuery 获取图片实际尺寸时，获取到的值是 0？

原因：图片还未完全加载，导致获取到的尺寸为 0。

解决方法：在图片加载完成后再获取尺寸，可以使用 $(window).on('load', function() { ... }) 或者在图片的 load 事件中获取尺寸。

$(window).on('load', function() {
    var img = $('#myImage');
    var width = img.width();
    var height = img.height();

    console.log('图片实际宽度: ' + width);
    console.log('图片实际高度: ' + height);
});

或者：

$('#myImage').on('load', function() {
    var width = $(this).width();
    var height = $(this).height();

    console.log('图片实际宽度: ' + width);
    console.log('图片实际高度: ' + height);
});

通过以上方法，可以确保在图片完全加载后再获取其实际尺寸。