Question

我在页面上有一堆图像。我正在尝试使用jQuery来获取每个图像的高度并在图像之后显示它。所以这是我的代码：


$(document).ready(function() {
  $(".thumb").each(function() {
    imageWidth = $(".thumb img").attr("width");
    $(this).after(imageWidth);
  });
});

<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>


[...]

我在jQuery背后的逻辑是，我想通过每个“拇指”选择器，将“拇指”内的img的高度分配给变量“imageWidth”，然后在每个“拇指”后显示文本中的高度

我遇到的问题是它只能处理第一张图像然后退出。如果我使用“thumb_img”类，我可以让它工作，但我需要访问“thumb”类的图像高度。

希望这不是太混乱，因为我对jQuery很新。谢谢你。

Answer 1

您将无法使用document.ready（）来执行此操作，因为图像在调用时不会加载。

您实际上需要将此代码放入onload（）事件处理程序中，该处理程序在文档和所有图像加载完成后调用。

只有当图像加载完毕后，浏览器才知道它们有多大。

Answer 2

使用此：

imageWidth = $(this).children("img").attr("width")

以下选择您的所有图片：

$(".thumb img")

...所以当你要求属性时，它会从集合中的第一个对象返回它

很抱歉所有的编辑...但最好重用jquery对象，所以：

var $this = $(this)

然后参考$这是优化所需要的。在这个例子中没什么大不了的，但这是一个很好的做法。

Answer 3

$().ready(function() {

        $(".thumb img").load(function() {
            var imageHeight = $(this).height();
            $(this).parent().append(imageHeight);

        });

});

Answer 4

我使用类似的东西来预加载图像并在mouseover和mouseout中设置一些代码，并为类名为“swap”的所有图像设置样式。对我而言，$(this)无效但直接this有效：

// in jquery
$(document).ready(function(){
        swapAndPreload();
    });

function swapAndPreload(){
    $(".swap").each(function(){
        // preload images in cache
        var img = new Image();
        img.src=this.src.replace(/([-_])out/,'$1over');
        //set the hover behaviour
        this.onmouseover = function(){
            this.src=this.src.replace(/([-_])out/,'$1over');
        }
        //set the out behaviour
        this.onmouseout = function(){
            this.src=this.src.replace(/([-_])over/,'$1out');
        }
        //set the cursor style
        this.style.cursor="pointer";
    });
}

使用jQuery来获取图像高度

4 个答案: