文章/答案/技术大牛

发布

jquery 获取图片高宽为0

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以方便地获取和操作 DOM 元素。

问题描述

在使用 jQuery 获取图片的高宽时，有时会发现图片的高宽为 0。这通常是因为在图片完全加载之前尝试获取其尺寸。

原因

图片未完全加载：在图片完全加载之前，浏览器可能还没有计算出图片的实际尺寸。
图片路径错误：如果图片路径错误，图片将无法加载，导致尺寸为 0。
CSS 样式影响：某些 CSS 样式可能会影响图片的显示尺寸。

解决方法

方法一：使用 `load` 事件

确保在图片完全加载后再获取其尺寸：

$('img').on('load', function() {
    var width = $(this).width();
    var height = $(this).height();
    console.log('Width: ' + width + ', Height: ' + height);
});

方法二：使用 `complete` 属性

检查图片是否已经加载完成：

$('img').each(function() {
    if (this.complete) {
        var width = $(this).width();
        var height = $(this).height();
        console.log('Width: ' + width + ', Height: ' + height);
    } else {
        $(this).on('load', function() {
            var width = $(this).width();
            var height = $(this).height();
            console.log('Width: ' + width + ', Height: ' + height);
        });
    }
});

方法三：确保图片路径正确

检查图片路径是否正确，确保图片能够正常加载。

方法四：检查 CSS 样式

确保没有 CSS 样式影响图片的显示尺寸。例如，检查是否有 width 和 height 属性设置为 0。

应用场景

在处理图片上传、缩放、裁剪等场景时，需要获取图片的实际尺寸。确保在这些操作之前图片已经完全加载。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Image Dimensions</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() {
            $('#myImage').on('load', function() {
                var width = $(this).width();
                var height = $(this).height();
                console.log('Width: ' + width + ', Height: ' + height);
            });
        });
    </script>
</body>
</html>

通过上述方法，你可以确保在图片完全加载后再获取其尺寸，避免获取到 0 的情况。

页面内容是否对你有帮助？

有帮助

没帮助

jquery 获取图片高宽为0

基础概念

问题描述

原因

解决方法

方法一：使用 `load` 事件

方法二：使用 `complete` 属性

方法三：确保图片路径正确

方法四：检查 CSS 样式

应用场景

示例代码

相关·内容

【HarmonyOS 5】测评鸿蒙应用，获取用户相册图片的三种方式

国产车载通信测试方案：车规级CAN SIC芯片测试技术解析

10分钟学会基于Git和Nginx搭建自己的私人图床，告别图片404!!!

078_字符串类型_str_string_下标运算符_中括号

芯片ESD可靠性测试和ESD功能性测试与鸿怡芯片测试座应用适配

LCC48pin光电收发一体模块测试与测试座socket应用案例

高速数据通信光模块测试:光通信模块LCC48pin一拖九工位模块测试座socket

人工智能芯片/模块测试:谷易AI芯片/模块测试座socket的关键角色

PS小白教程:如何在Photoshop中制作透明玻璃效果？

降压恒流芯片-H5112A H5112A 24V36V48V60V80V100V转9V12V24V

PS小白教程:如何在Photoshop中制作出镂空文字？

霍尔效应线性电流传感器特性-测试适配测试座socket-鸿怡电子电流传感器芯片测试方案

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

jquery 获取图片高宽为0

基础概念

问题描述

原因

解决方法

方法一：使用 load 事件

方法二：使用 complete 属性

方法三：确保图片路径正确

方法四：检查 CSS 样式

应用场景

示例代码

【HarmonyOS 5】 测评鸿蒙应用，获取用户相册图片的三种方式

国产车载通信测试方案：车规级CAN SIC芯片测试技术解析

10分钟学会基于Git和Nginx搭建自己的私人图床，告别图片404!!!

078_字符串类型_str_string_下标运算符_中括号

芯片ESD可靠性测试和ESD功能性测试与鸿怡芯片测试座应用适配

LCC48pin光电收发一体模块测试与测试座socket应用案例

高速数据通信光模块测试:光通信模块LCC48pin一拖九工位模块测试座socket

人工智能芯片/模块测试:谷易AI芯片/模块测试座socket的关键角色

PS小白教程:如何在Photoshop中制作透明玻璃效果？

降压恒流芯片-H5112A H5112A 24V36V48V60V80V100V转9V12V24V

PS小白教程:如何在Photoshop中制作出镂空文字？

霍尔效应线性电流传感器特性-测试适配测试座socket-鸿怡电子电流传感器芯片测试方案

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法一：使用 `load` 事件

方法二：使用 `complete` 属性

【HarmonyOS 5】测评鸿蒙应用，获取用户相册图片的三种方式