是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
如果你正在使用jQuery并且你正在请求图像大小,你必须等待它们加载,否则你只会得到零。
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
其他回答
在使用真实图像大小之前,您应该加载源图像。如果使用jQuery框架,可以以简单的方式获得真实图像大小。
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
clientWidth和clienttheight是DOM属性,显示DOM元素内部维度的当前浏览器大小(不包括边距和边框)。在IMG元素的情况下,这将得到可见图像的实际尺寸。
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
最近我有同样的问题,在一个错误的伸缩滑块。由于加载延迟,第一张图像的高度被设置得较小。我尝试了以下方法来解决这个问题,它是有效的。
// Create an image with a reference id. Id shall
// be used for removing it from the DOM later.
var tempImg = $('<img id="testImage" />');
// If you want to get the height with respect to any specific width you set.
// I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
// Append to body
$('body').append(tempImg);
// Set an image URL. I am using an image which I got from Google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';
这将为您提供相对于您设置的宽度的高度,而不是原始宽度或零。
其他所有人都忘记了的事情是,你不能在加载前检查图像大小。当作者检查所有发布的方法时,它可能只在本地主机上工作。
由于这里可以使用jQuery,请记住'ready'事件是在图像加载之前触发的。$('#xxx').width()和.height()应该在onload事件或以后触发。
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();
推荐文章
- momentJS日期字符串添加5天
- 格式化特定时区的日期
- 如何将此上下文传递给函数?
- 将.NET DateTime转换为JSON
- SameSite警告Chrome 77
- 在ES6 (ECMAScript 6)中是否有一种不带可变变量的循环x次的机制?
- 克隆对象没有引用javascript
- 验证字符串是否为正整数
- 如何获得一个键/值JavaScript对象的键
- 什么时候JavaScript是同步的?
- 在jQuery中取消<select>的最佳方法?
- 如何在Typescript中解析JSON字符串
- jQuery的“输入”事件
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么