开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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获取loaded 宽高这么变态

JQUERY获取loaded 宽高这么变态： $('').attr('src',img.src).load(function() { img.Owidth = $(this).width

7751 0

JS获取图片原始宽高

最近在给博客的相册模块做优化，需要知道图片的原始大小，我以前的做法是把图片的真实宽高分别放在data-width和data-height中，效果是达到了，但是总觉得扩展性很低，当不知道图片的大小时，还要一张一张图片的去查看图片信息手动输入图片大小...，很繁琐获取图片大小： 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度也就是说如果图片原始大小1200，使用css或者width属性设置为600，那么这里拿到的宽度为600，显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...img的宽和高需要注意的是在给img的src赋值时，这是一个异步过程，会存在获取img的宽度时值为0(图片还未加载完成)，可以在给img赋值之前加上onload事件 var img = document.createElement...img.src = "1.jpg" 3.使用naturalWidth(推荐) 使用HTMLImageElement.naturalWidth拿到图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0

6.4K2 0

.Net 上传图片之前获取图片的宽高

Stream st = Request.Files[0].InputStream; Byte[] buffer = new Byte[...st.Length]; st.Read(buffer, 0, buffer.Length); MemoryStream stream =

1.1K2 0

Android 通过图片url获取图片的宽高

//获取图片真正的宽高 Glide.with(mContext).asBitmap().load(list.get(0).imagePath).into(new SimpleTarget

1.9K3 0

php getimagesize 获取图片宽高以及后缀

获取文件宽高在 PHP 中有一个简单函数 getimagesize。只需要传递文件名即可。.../images/resources/201906/24/jPINglfSMseh2Ri1g9JbgIY8ykisfe6mfJJmTh5P.jpeg'); return $image_arr; 返回内容为：...给出的是图像的 MIME 信息，此信息可以用来在 HTTP Content-type 头信息中发送正确的信息，如： header("Content-type: image/jpeg"); 可见返回内容为数组...,我们获取数组下标即可 <?...php $width = $image_arr[0]; $height = $image_arr[1]; $type = $image_arr[6]; 另外、我们也可以使用 list 来获取数据.

1.9K2 0

javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0，我们需要它加载完所有的相关数据再获取宽和高。...从缓存里读取图片的宽高不用说，非常方便快捷，今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。...(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if (img.width>0 || img.height>0) { var diff = new Date...这是一张2560 * 1600大小的图片，各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内，而onload至少五秒以上，这差别之大说明快速获取图片宽高非常实用。

5.6K1 0

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。...可视宽高 clientHeight ：元素的可视高度（包括内边距，不包括边框、外边距或滚动条） clientWidth ：元素的可视宽度（包括内边距，不包括边框、外边距或滚动条）自身宽高 offsetHeight...：元素的相对水平偏移位置（左边界距离可视区域最左侧的距离） offsetParent ：元素的偏移容器（父元素） offsetTop ：元素的相对垂直偏移位置（上边界距离可视区域最上边的距离）事迹宽高...元素的宽高 width() ：获得或设置元素【内容】的宽；若元素的display：none，其值为0 height() ：获得或设置元素【内容】的高；若元素的display：none，其值为0 innerWidth...浏览器相关宽高 $(window).height() ：获取浏览器可视窗口的高度； $(document).height() ：获取整个网页文档的高度；当网页高度不足浏览器窗口时，返回的是 $(window

3.1K0 0

JS实现本地预览上传图片并获取宽高

= function (evt) { //获取的是图片的base64代码 var replaceSrc = evt.target.result; //...[0]); } 上面就实现了上传图片是本地预览图片了。...但是没有图片的宽度和高度，获取图片的宽度和高度需要用到Image() 对象。 function selectImg(file) { if (!file.files || !...= function (evt) { //获取的是图片的base64代码 var replaceSrc = evt.target.result; //...：" + image.width + " px"); console.log("图片高度：" + image.height + " px"); // 再将获取值赋给img

8K2 0

ReactNative 获取屏幕宽高

需要导入Dimensions let Dimensions = require('Dimensions'); // 示例 class KKScreen { ...

2.1K4 0

Flutter 获取屏幕宽高

屏幕宽度： MediaQuery.of(context).size.width 屏幕高度： MediaQuery.of(context).size.height

1.6K1 0

获取元素尺寸宽高

DOCTYPE html> 2 3 4 5 6 获取元素尺寸宽高 18 19 20 Prosper 21 22 23 /** 24 * 获取元素尺寸宽高

1.2K3 0

java中的onresume_android onCreate onResume中获取 View 宽高为0分析

0； 2、在 onResume中 handler.post 中获取控件的宽高为什么是0； 3、在 onResume中的 view.post 中为什么能获取控件宽高； 4、在 onResume 中handler.post...在 View.post 后面为什么执行反而在前面；针对以上4个疑问进行解答 1、setContentView后获取控件的宽高为什么为0；这个很好理解， setContentView只是解析了 xml...文件并创建了对应的控件，并没有进行控件的测量等工作； 2、在 onResume中 handler.post 中获取控件的宽高为什么是0； ActivityThread.java类中handleResumeActivity...所以 handler.post 消息回先执行导致获取 view 宽高失败。...onResume 之后,所以此时attachInfo == null,从而消息被保存到RunQueue中，而RunQueue在ViewRootImpl的performTraversals被中执行,所以可以获取到控件宽高

3942 0

第76天：jQuery中的宽高

Document对象的location属性也是引用了location属性也是引用了location对象 Window.location===document.location//true 与window相关的宽高介绍....screen.width .screen.availHeight .screen.availWidth Window.screenTop Window.screenLeft 与document相关的宽高介绍...若没有滚动条，即为元素设定的宽高若有滚动条，则为原来宽高减去滚动条的宽高无padding无滚动：clientWidth=style.width 有padding无滚动：clientWidth=style.width...style.width+style.padding*2-滚动条宽度 document.body.clientLeft和document.body.clientTop 指元素周围边框的厚度，如果不指定边框或不定位元素，值为0...style.padding*2+(border-width)*2=clientWidth+滚动轴宽度+border宽度*2 offsetLeft和offsetTop 如果当前元素的父元素没有定位，则offsetParent为body

6411 0

js图片监听onload事件，依然有获取不到宽高的场景

背景在实际开发中，移动端页面遇到的，采用正常写法，图片 src赋值写在 onload 事件监听后面，依然会有拿不到图片真实宽高的场景，获得的图片宽高都为0，真的是好坑啊。...img = new Image() // 加载完成执行 img.onload = function(){ console.log(img.width,img.height) } // 改变图片的...为了避免图片加载失败或不存在等长场景导致定时器一直执行，可以加一个兜底，比如10秒钟之后自动清除定时器。...var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取宽高 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回宽高 if (img.width>0 || img.height>0) { clearInterval(set); } } var

4K2 0

Activity中获取View的宽高

有些时候我们需要获取到View的宽高信息。在onCreate和onResume中尝试view.getWidth()或是view.getHeiht()时，我们会发现获取到的是0。...获取宽高正确的方法有哪些呢？...方法1 - 在Activity的onWindowFocusChanged获取宽高 @Override public void onWindowFocusChanged(boolean hasFocus)...view的宽高。...应用 - 动态调整ImageView的宽高获取到view的宽高后，我们可以动态地调整ImageView的高度。假设图片宽高为704 * 440。xml中设置scaleType为fitXY。

1.6K1 0

js获取各种距离和宽高

浏览器窗口的整个页面高度滚动高度 document.documentElement.scrollTop 浏览器滚动掉的Y距离鼠标event事件属性说明 offsetX 以当前的元素的左上角为原点..., 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口...(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点, 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离..., 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY 以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离元素的宽高及各种距离宽高属性...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离，也就是元素滚动条被向下/向右拉动的距离。

2371 0

获取浏览器可视区域宽高

1 /** 2 * 获取浏览器可视区域宽度 3 */ 4 function getViewPortOffset() { 5 if (window.innerWidth

9393 0

js获取屏幕以及元素宽高的方法

一.window相关网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：...document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽...) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight...网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象的滚动高度。...相对容器的水平坐标 event.offsetY 相对容器的垂直坐标六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容的宽 height是指可见内容的高

6.9K2 0

iOS获取屏幕宽高、设备型号、系统版本信息介绍1、获取屏幕的宽高2、获取设备的型号3、获取系统版本

之前也研究过，这里把我的方法记录下来，本文介绍三个常用的设备信息获取方式：获取屏幕的宽高。用于在设置控件位置的时候计算相对屏幕的距离获取设备的型号。...1、获取屏幕的宽高屏幕的宽高是一个常常需要用到的信息，尤其是当你用代码写UI时。比如当你写一个UILabel，设置其frame时，你想要它居中，而你想为其设置的宽度为200，那怎么设置它的x值呢？...获取屏幕宽、高的方法如下： // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]....bounds.size.height 一般来说我们在pch文件里将其设置为宏，这样在每个地方就都可以调用了，就不用每次都用这么长一串代码： //设备的宽高 #define SCREENWIDTH...]) 这样你就可以获取版本号了，可以打印出来： NSLog(@"当前运行系统为：iOS%@", SystemVersion); 在使用的时候，可以转化为float型的数来进行判断，如： if (

2.6K4 0

ElementUI——el-upload上传前校验图片宽高

element.eleme.cn/#/zh-CN/component/upload 内容 before-upload 借助于:before-upload来进行校验，使用FileReader和Image来获取图片宽高...$message.warning('产品主图尺寸必须为108*108') return Promise.reject() }

2401 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭