如何在浏览器中完成图像大小调整后运行功能?(JS/JQuery）

How to run function after images finished resizing in browser? (JS/JQuery)

本文关键字：功能 运行 JS JQuery 调整 浏览器 图像      更新时间：2023-09-26

我有一个页面，里面有两包图像(大图像和小图像，比如 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((函数(图像大小调整完全完成(，否则定位不正确。

在 

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

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

相关文章：