0

试图找到 img 高度并将内联应用为 attr。目前 img 只有 src attr 但想动态查找高度并应用。

当前的

  <img src="#">

期望的

<img src="#" height="find this images height">

这就是我到目前为止所拥有的

$(document).ready(function() {
 $("img").load(function() {
 var width = $(this).width();
 var height = $(this).height() ;

 $(this).attr( "height", "+ height" );
 });
});

有任何想法吗？

4

2 回答 2

1

来自jQuery 文档：

与图像一起使用时加载事件的注意事项

开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行一个函数。应该注意几个已知的警告。这些都是：

它不能始终如一地工作，也不能可靠地跨浏览器

如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发

它没有正确地冒泡 DOM 树 可以停止为已经存在于浏览器缓存中的图像触发

你可以使用这个：

var img = $('img').get(0); // no better selector ?
if (img.height) alert('height is '+img.height);
else img.onload = function(){alert('height is '+img.height)};

以更清洁的方式：

function onImgLoaded(img, callback) {
   if (img.width) callback(img));
   else img.onload = function(){callback(img)};
}
onImgLoaded($('img').get(0), function(img){
    alert('height is '+img.height);
});
于 2012-11-05T19:27:50.053 回答
0

这里有点不清楚在写入 DOM 之前是否需要图像的高度。这是使用直接 javascript 获取宽度和高度的方法：

var img   = document.getElementById('image_id'); 
var img_w = img.clientWidth;
var img_h = img.clientHeight;

这是使用 jQuery 的方法：

var img   = $("<img src='image_url' />");
var img_w = img.width;
var img_h = img.height;

祝你好运...

附上答案：

var img_h; var img_w;
var img = new Image();
img.src = img_src;
img_h   = img.height;
img_w   = img.width;
document.write( "<img src=" + img_src + " height=" + img_h + " />" );
于 2012-11-05T19:32:17.947 回答