Question

现在我正在尝试以下代码。这在大多数情况下都是有效的（在第一次访问后重新加载时）但是第一次访问页面时，图像没有正确调整大小。我认为这是因为因为在触发页面就绪回调之前加载了图像。

我已尝试直接在.resize()回调中调用.ready()函数，但图片仍然无法有时调整大小，因为.ready()回调时图像可能会被加载触发。

我应该如何连接resize()函数以使图像无论何时加载都能正确调整大小？

function resize($img) {
    var max_size_w = 200;
    var max_size_h = 200;
    var h = $img.height();
    var w = $img.width();
    if (h > max_size_h) {
        h = max_size_h;
        w = Math.ceil($img.width() / $img.height() * max_size_h);
    }
    if (w > max_size_w) {
        h = Math.ceil($img.height() / $img.width() * max_size_w);
        w = max_size_w;
    }
    $img.css({ height: h, width: w });
}

$().ready(function() {
    // Size the images correctly
    $(".personPictureImage").each(function() {
        $(this).find("img").load(function() { resize($(this)); });
    });
});

更新： HTML

<div class="personPicture">
    <div class="personPictureFrame">
        <div class="personPictureImage">
            <a href="../images/media/popup/46.png" class="lightbox">
                <img src="../images/media/thumbnail/46.png" alt="">
            </a>
        </div>
        <div class="personPictureFrameTL"></div>
        <div class="personPictureFrameTR"></div>
        <div class="personPictureFrameBL"></div>
        <div class="personPictureFrameBR"></div>
    </div>
</div>

Answer 1

调用窗口加载函数内部的函数，在加载所有图像后调整大小：

$(window).load(function(){
    // Size the images correctly
    $(".personPictureImage").each(function() {
        resize($(this));
    });
});

不推荐使用$().ready，请使用$(function(){或$(document).ready(function(){

Answer 2

$(document).ready(function(){
 function resize($img) {
    var max_size_w = 200;
    var max_size_h = 200;
    var h = $img.height();
    var w = $img.width();
    if (h > max_size_h) {
        h = max_size_h;
        w = Math.ceil($img.width() / $img.height() * max_size_h);
    }
    if (w > max_size_w) {
        h = Math.ceil($img.height() / $img.width() * max_size_w);
        w = max_size_w;
    }
    $img.css({ height: h, width: w });
    }

    $(".personPictureImage").each(function() {
        $(this).find("img").load(function() { resize($(this)); });
    });

}())

那应该有用。

如何将图像约束到最大宽度/高度？

2 个答案: