jquery 获取不到图片高度

在使用jQuery获取图片高度时，可能会遇到图片尚未完全加载完成的情况，导致获取到的高度不准确。以下是一些基础概念和相关解决方案：

基础概念

图片加载事件：图片在页面加载时并不会立即显示，而是需要经过一定的加载过程。如果在图片未完全加载时尝试获取其高度，可能会得到0或其他不准确的结果。
jQuery的.height()方法：该方法用于获取元素的高度，但在图片未完全加载时，可能无法正确获取到高度。

解决方案

为了确保在图片完全加载后再获取其高度，可以使用以下几种方法：

方法一：使用`$(window).load()`

$(window).load(function() {
    var imgHeight = $('img').height();
    console.log('图片高度:', imgHeight);
});

这种方法会在整个页面（包括所有依赖的资源，如图像、CSS、脚本等）完全加载后执行。

方法二：使用`img.onload`

$('img').each(function() {
    $(this).on('load', function() {
        var imgHeight = $(this).height();
        console.log('图片高度:', imgHeight);
    });
});

这种方法会对每个图片单独绑定加载事件，确保在每个图片加载完成后获取其高度。

方法三：使用`setTimeout`（不推荐）

setTimeout(function() {
    var imgHeight = $('img').height();
    console.log('图片高度:', imgHeight);
}, 1000); // 延迟1秒执行

这种方法通过设置延迟来等待图片加载，但并不保证图片一定会在这段时间内加载完成，因此不是最可靠的方法。

应用场景

动态加载图片：当页面中有动态加载的图片时，确保在图片加载完成后再获取其尺寸。
响应式设计：在响应式设计中，图片的高度可能会根据屏幕尺寸变化，需要在图片加载后重新计算。

示例代码

以下是一个完整的示例，展示了如何在图片加载完成后获取其高度：

<!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 src="path/to/your/image.jpg" alt="示例图片">

    <script>
        $(document).ready(function() {
            $('img').each(function() {
                if(this.complete) {
                    var imgHeight = $(this).height();
                    console.log('图片高度:', imgHeight);
                } else {
                    $(this).on('load', function() {
                        var imgHeight = $(this).height();
                        console.log('图片高度:', imgHeight);
                    });
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，我们首先检查图片是否已经加载完成（通过this.complete属性），如果已经加载完成，则直接获取其高度；否则，绑定load事件，在图片加载完成后获取其高度。

通过这些方法，可以有效解决在使用jQuery获取图片高度时遇到的问题。