Question

我正在使用带有图像的bootstrap row-fluid。当浏览器窗口发生变化时，此图像的尺寸会发生变化，因此在调整图像大小时是否会触发任何事件侦听器？我希望它用于获取图像宽度。我试过这个：

$(window).load(function() {
    $('img.product-thumbnail').resize(function(){
        alert($('img.product-thumbnail').width());
    });
});

我的img标签是：

<img src="img/produkt1.png" title="Názov produktu" class="product-thumbnail">
<img src="img/produkt2.png" title="Názov produktu" class="product-thumbnail">

总共5张图片。现在我没有得到任何警报，但我知道img改变了它的大小（chrome dev tools＆gt; show dimensions）。有没有办法来实现这个？（包括jquery所以选择器不应该有问题）

Answer 1

没有任何真正简单的方法可以做到这一点。 jQuery resize() event旨在捕获窗口大小调整事件，而不是侦听单个元素。

考虑到这一点，为了便于解释，请允许我建议：

1）在窗口加载时，抓取图像尺寸并将其粘贴到data-属性中：

$(window).load(function() {
    $('img.product-thumbnail').each(function(){
    var $this = $(this),
        // get the image dimensions 
        thisWidth = $this.width(),
        thisHeight = $this.height();

        // push them into an attribute 
        $(this).attr('data-width', thisWidth);
        $(this).attr('data-height', thisHeight);
    });
});

2）将一个事件绑定到窗口调整大小并检查：

$(window).resize(function(){
    // loop over each, checking dimensions
    $('img.product-thumbnail').each(function(){
        var $this = $(this),
            // get the image dimensions 
            thisWidth = $this.width(),
            thisHeight = $this.height();

       //check that there are data-attribtues before going further
       if($this.attr('data-height').length){
           if(thisWidth !== $this.attr('data-width')){
               //width has changed
           }
           if(thisHeight !== $this.attr('data-height')){
               //height has changed
           }
       }
    }
});

这是非常快速，未经测试和未经优化的代码，但其背后的理论是可靠的，应该有助于为您提供检测图像是否已更改大小的良好起点。

Bootstrap如何检查图像是否已调整大小

1 个答案: