我有一个包含两包图像的页面(大的和小的,比如 10-30 个),它们的大小必须动态调整为当前浏览器窗口的大小,然后由另一个函数处理。我知道在浏览器中调整大小通常是个坏主意,但服务器上的需求+遗留代码也是如此。站点使用 JQuery。
代码(缩短的)如下所示:
imageResizeBox(imgSmallHeight, '.box img'); // resize images to some height, parameters are size and selector
imageResizeBox(imgBigHeight, '.imagebig img'); // resize other images to another height
processImages(); // process both packs of images (do positioning based on new dimensions)
这是调整大小功能:
function imageResizeBox(size, selector) {
var max_size = size;
$(selector).each(function (i) {
if (this.complete) {
resizeImg(this);
} else {
$(this).load(function () {
resizeImg(this);
});
}
});
function resizeImg(img) {
if ($(img).height() > $(img).width()) {
var h = max_size;
var w = Math.ceil($(img).width() / $(img).height() * max_size);
} else {
var w = max_size;
var h = Math.ceil($(img).height() / $(img).width() * max_size);
}
$(img).css({
height:h,
width:w
});
}
}
我需要在浏览器中完成前两个功能后调用 processImages() 函数(图像大小调整完全完成),否则定位不正确。