为什么从 HTML 查询创建数组后图像的客户端高度为 0

Question

所以我正在执行一个GET请求来取消启动以在页面上加载图像。我想获取加载图像的 clientHeight，以便我可以在每个图像上操作 CSS 网格跨度属性。我能够获取图像及其客户端高度，但是当我使用 Array.from 从 HTML 节点创建数组时，新数组中的项的 clientHeight 为 0，我不确定为什么。我感谢任何帮助！

这是我的完整JS代码：

axios
    .get('https://api.unsplash.com/photos/random', {
        params: { count: 5 },
        headers: {
            Authorization: `Client-ID ${ID}`
        }
    })
    .then(response => {
        let html = '';
        response.data.forEach(image => {
            html += `
                    <img src=${image.urls.regular} alt=${
                image.alt_description
            } />
            `;
        });
        document.getElementById('posts').innerHTML = html;
        updateHTML();
    });

const updateHTML = () => {
    let postsHTML = document.getElementsByTagName('img');
    console.log(postsHTML);
    let postsArray = Array.from(postsHTML);
    console.log(postsArray);
    let html = '';
    postsArray.map(post => {
        console.log(post.clientHeight);
        const span = setSpans(post.clientHeight);
        html += `
                <img src=${post.src} alt=${
            post.alt
        } style="grid-row-end: span ${span}"/>
            `;
    });
    console.log(html);
    document.getElementById('posts').innerHTML = html;
};
const setSpans = height => {
    return Math.ceil(height / 10 + 1);
};

Answer 1

您的图像仍处于加载状态，无法获得正确的客户端高度。您需要处理图像的onload事件，然后查询客户端高度。