Question

我的简单脚本有问题：

$(document).ready(function() {
    var lastHeight = 0;
    $("img").each(function(i) {
        if (i != 0) {
            $(this).css({
                height: lastHeight / 100 * 90
            })
        }
        lastHeight = parseInt($(this).css("height"));
    })
});

它应该显示图像，其中每个图像小于前一个（以％比率）。但我有问题。在第一次（没有缓存），我得到一个正常大小的图像，而其他图像非常小。如果我重新加载页面（使用缓存），它可以正常工作。

图片由php加载：

foreach($top_images as $top_i) {
    echo '#'.$ratio;
    echo '
        <br><img class="top" src="'.$top_i['url'].'" ><br>
    ';
    $ratio++;
}

Answer 1

这可能是因为您在图像完全加载之前运行了脚本。

图像尺寸仅在图像加载完毕后才可用。

尝试将代码包装在jquery ready method。

中

$(document).ready(function() {
    var lastHeight = 0;
    $("img").each(function(i) {
        if (i != 0) {
            $(this).css({
                height: lastHeight / 100 * 90
            })
        }
        lastHeight = parseInt($(this).css('height'));
    })
});

每个图像都比以前的JS少

1 个答案: