我在我的 JavaScript 代码中附加了一个图像,但想要获得其正确的宽度和高度。这可能吗?我的代码如下所示:
$('body').append('<img src="path.jpg" width="'
+ w + '" height="' + h + '" alt="" />');
我知道如何在加载后获取图像宽度,但我正在加载img
并想直接获取其相应的宽度和高度。有小费吗?
我在我的 JavaScript 代码中附加了一个图像,但想要获得其正确的宽度和高度。这可能吗?我的代码如下所示:
$('body').append('<img src="path.jpg" width="'
+ w + '" height="' + h + '" alt="" />');
我知道如何在加载后获取图像宽度,但我正在加载img
并想直接获取其相应的宽度和高度。有小费吗?
您可以在加载后获取图像的大小:
var imageWidth;
var imageHeight;
$('<img>').on('load', function(){
imageWidth = this.width;
imageHeight = this.height;
$('body').append($(this));
}).attr('src', imageUrl);
HTML 规范建议指定height
和width
for<img>
作为视觉代理的提示,它混合了标记和样式规则来构建 HTML 文档的视觉表示。在 CSS 盒子模型中,图像尺寸是固有的,即它们隐含在二进制 blob 中。这意味着浏览器必须等待 HTTP 响应才能决定图像有多大,从而决定如何布局和定位兄弟姐妹和父母。在 HTML 页面中指定尺寸有助于浏览器快速呈现页面,因为它可以在从服务器下载图像之前分配宽度和高度。
此时应该清楚,在下载之前无法在客户端访问图像宽度。当 Javascript 知道它时,浏览器已经知道了,而您声明它对于您的要求来说为时已晚。
因此,提示浏览器的唯一选择是在服务器端测量图像。它可以在每个请求的基础上完成(但这会浪费资源),或者可以在第一次上传图像时完成一次(然后从数据库中检索),或者最终可以假设它是恒定的,例如如果它是您的服务将始终增长或缩小到完全W x H
像素大的个人资料图片(这可能是一个配置参数)。
var image = new Image;
image.src = $('img').prop('src');
alert($(image).prop('height'))
我决定在 wordpress 中创建一个新函数来输出图像尺寸,这样我就可以用 wordpress 检索
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;
}
并将 image_dimensions 附加到 img 并使用 javascript 检索
w = $(this).attr('product-width');
h = $(this).attr('product-height');
您可以提前加载图像,而不必立即显示。
var img = document.createElement('img');
img.src = 'your_image.jpg';
var imgHeight = img.height,
imgWidth = img.width;
您现在可以随时调用它以及正确的详细信息。