Question

即使对于以后动态加载的图像，我也想要居中和裁剪图像。

HTML

<body>
    <div class="iThumbnail">
        <img src="images/art-vertical.jpeg" alt=""/>
    </div>
</body>

上面的body内容第一次是静态的。稍后，body内容将与其他图像源动态加载/替换。

因此，对于静态内容，我可以使用以下代码对图像进行居中和裁剪（感谢jonathanNicol和nickCraver）。

$(document).ready(function() {
    function thumbnailImageCropCenter() {
        $('.iThumbnail').find('img').one('load', function() {
            if (($(this).height() > $(this).width()) && ($(this).height() != 0) ) {
                $(this).addClass('portraitView');
            }
        }).each(function() {
            if(this.complete) $(this).load();
        });
    }
    thumbnailImageCropCenter();
});

我想避免每次动态加载页面内容时都调用thumbnailImageCropCenter()。

问题：有没有办法自动将thumbnailImageCropCenter()绑定到body，使其适用于body内的所有图像，无论图像是否以后动态加载。

PS：用.one()取代.bind()没有帮助。

Answer 1

$('body').on('load', '.iThumbnail img', function() {
  var $this = $(this);
  if (($this.height() > $this.width()) && ($this.height() != 0) ) {
       $this.addClass('portraitView');
  }
});

动态加载图像后应用图像居中和裁剪

1 个答案: