我正试图获得图像的宽度和高度,如下所示:
<ul class="gallery">
<li><a href="#"><img src="#"></a></li>
<li><a href="#"><img src="#"></a></li>
<li><a href="#"><img src="#"></a></li>
<li><a href="#"><img src="#"></a></li>
</ul>
我按照以下方式完成了这个jquery代码:
$(document).ready(function(){
$(".gallery").find("li a").each(function() {
alert($(this).find("img").width() + 'x' + $(this).find("img").height());
});
});
由于某种原因,我一直得到0x0,我想要的只是ul li a中每个图像的宽度和高度。
我还读到我需要做以下事情:
$('.gallery li a img').load(function() {
var $img = $(this);
$img.parent().width($img.width());
});
因为document.ready在image.load之前被触发,但它仍无效。
任何帮助将不胜感激。 谢谢。
答案 0 :(得分:1)
您应该可以在window.load事件中执行此操作:
$(window).load(function(){
$(".gallery").find("li a").each(function () {
console.log($(this).find("img").width() + 'x' + $(this).find("img").height());
});
});
请参阅window.load和document.ready here:window.onload vs $(document).ready()
之间的区别<强> jsFiddle example
答案 1 :(得分:1)
$(".gallery img").on("load", function () {
var $this = $(this);
console.log($this.width() + "x" + $this.height());
}).each(function () {
if (this.complete) {
$(this).trigger("load");
}
});