Question

我在页面上有几张图片。除第一个之外的每个图像都有一个＆＃34; index_image＆＃34;类。我希望每个图像的高度与第一个图像的高度相同。这是第一张图片：

<script>
    $(document).ready(function() {
        var image_1_height = $('#ride_image').height();
        alert(image_1_height);
        $('.index_image').height(image_1_height); 
    });
</script>

这是改变图像的javascript：

Get-ItemProperty

它将所有图像的高度更改为零而不是第一个图像的高度。我认为这与在设置图像高度之前调用的代码有关，因为首先页面上没有图像，然后出现警报，然后出现第一个图像。其余的图像高度立即变为零，因此它们永远不会出现。

如何正确更改高度？

Answer 1

图像的高度仅在图像返回时设置，而不是在文档准备好时设置。

因此，当您尝试在文档准备时捕获图像高度时，图像尚未被提取，因此其高度为0.

你可以使用第一个图像的load()函数进行绑定，这样当它被加载时，它的高度将被设置为其余部分。

<script>
    $(document).ready(function() {
        var image_1_height = $('#ride_image').height();
        if (image_1_height !== 0) {
            alert(image_1_height);
            $('.index_image').height(image_1_height); 
        } else {
            $('#ride_image').load(function() {
                var image_1_height = $('#ride_image').height();
                alert(image_1_height);
                $('.index_image').height(image_1_height); 
            })
        }
    });
</script>

工作JS小提琴：http://jsfiddle.net/nayish/ehw6ufyq/3/

由于先前加载的图像将更快地运行并且不会触发加载功能。因此解决方案是首先尝试文档就绪，如果尚未设置（高度设置为0），那么我们将等待图像加载。问题可以在jquery load api页面的警告部分看到：https://api.jquery.com/load-event/。

更改图像高度的jquery将图像更改为错误的高度

1 个答案: