获取JavaScript中加载的图像的宽度
我在JavaScript代码中添加了一个图像,但希望得到正确的宽度和高度。这可能吗?我的代码如下所示:获取JavaScript中加载的图像的宽度,javascript,jquery,height,width,image,Javascript,Jquery,Height,Width,Image,我在JavaScript代码中添加了一个图像,但希望得到正确的宽度和高度。这可能吗?我的代码如下所示: $('body').append('<img src="path.jpg" width="' + w + '" height="' + h + '" alt="" />'); $('body')。追加(“”); 我知道如何在加载后获得图像宽度,但我正在加载一个img,希望直接获得其相应的宽度和高度。有什么提示吗?加载图像后,您可以获得图像的大小: var im
$('body').append('<img src="path.jpg" width="'
+ w + '" height="' + h + '" alt="" />');
$('body')。追加(“”);
我知道如何在加载后获得图像宽度,但我正在加载一个
img
,希望直接获得其相应的宽度和高度。有什么提示吗?加载图像后,您可以获得图像的大小:
var imageWidth;
var imageHeight;
$('<img>').on('load', function(){
imageWidth = this.width;
imageHeight = this.height;
$('body').append($(this));
}).attr('src', imageUrl);
var图像宽度;
var图像高度;
$(“HTML规范建议为
指定高度和宽度,作为视觉代理的提示,视觉代理混合标记和样式规则来构建HTML文档的视觉表示。在CSS框模型中,图像维度是固有的,即它们隐含在二进制blob中。这意味着浏览ser必须等待HTTP响应才能决定图像的大小,从而决定如何布局和定位同级和父级。在HTML页面中指定尺寸有助于浏览器快速呈现页面,因为它可以在从服务器下载图像之前分配宽度和高度
在这一点上,应该很清楚,在下载之前无法访问客户端上的图像宽度。当Javascript知道它时,浏览器已经知道了,并且您声明对于您的要求来说已经太晚了
因此,提示浏览器的唯一选项是在服务器端测量图像。可以根据每个请求进行测量(但这是一种资源浪费),也可以在首次上载图像(然后从数据库检索)时进行一次测量,或者最终可以假定它是常数,例如,如果它是一个配置文件图片,则您的服务将始终增长或收缩到正好W x H
像素大(这可能是一个配置参数)。您可以提前加载图像,而不必立即显示它
var img = document.createElement('img');
img.src = 'your_image.jpg';
var imgHeight = img.height,
imgWidth = img.width;
现在,您可以随时调用它以及正确的详细信息。我决定在wordpress中创建一个新函数,输出图像尺寸,以便我可以使用wordpress检索does
function wpsc_the_product_dimensions( $width='', $height='', $product_id='' ) {
if ( empty( $product_id ) )
$product_id = get_the_ID();
$product = get_post( $product_id );
if ( $product->post_parent > 0 )
$product_id = $product->post_parent;
$attached_images = (array)get_posts( array(
'post_type' => 'attachment',
'numberposts' => 1,
'post_status' => null,
'post_parent' => $product_id,
'orderby' => 'menu_order',
'order' => 'ASC'
) );
$post_thumbnail_id = get_post_thumbnail_id( $product_id );
$image_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
$image_dimensions = 'product-link="'.$image_attributes[0].'" product-width="'.$image_attributes[1].'" product-height="'.$image_attributes[2].'"';
return $image_dimensions;
}
并将图像_维度附加到img,并使用javascript检索does
w = $(this).attr('product-width');
h = $(this).attr('product-height');
谢谢,我担心这就是问题所在。所以剩下的一个选项是在缓存中预加载图像,但使其不可见,然后显示它?我想我只在上载图像时提供参数,这似乎比预加载图像好。如果在未加载图像时使其不可见,则设置维度没有意义,因为浏览器无论如何都必须重新启动。唯一的选择是在服务器上进行测量,但是请注意,这不是一个要求,也不是常见做法。如果您真的想,那没关系,否则只需跳过它。这类似于:。但我现在将在上载文件时自动向上载文件添加参数。请注意必须等待图像加载后才能获得其大小。对于加载速度较慢的图像,您的代码不起作用。仅在页面加载时起作用,当Javascript更改src
时不起作用,返回未定义的
w = $(this).attr('product-width');
h = $(this).attr('product-height');