javascript - 图像在浏览器中调整大小后如何运行函数？ (JS/JQuery)

Question

我有一个包含两包图像的页面(大的和小的，比如 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()函数，否则定位不正确。

Answer 1

在 a 中调用您的代码

$(document).ready(**call your code here**);

ready 在所有图像加载后运行，请参阅规范 http://api.jquery.com/ready/