gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 12:10:47 25 4
gpt4 key购买 nike

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

HTML

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

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

因此,对于静态内容,我可以使用以下代码将图像居中并裁剪(感谢 jonathanNicolnickCraver)。

$(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()绑定(bind)到body,使其适用于body中的所有图像,没有如果稍后动态加载图像很重要。

PS:用 .bind() 替换 .one() 没有帮助。

最佳答案

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

关于javascript - 动态加载图像后应用图像居中和裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29060622/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com