从HTMLCollection创建数组后，为什么image的clientHeight为0？

Question

So im performing a GET request to unsplash to load images on a page. I want to get the clientHeight of the loaded images so I can manipulate CSS grid span properties on each one. I'm able to get the images and their clientHeights, but when I use Array.from to make an array from the HTMLCollection, the items in the new array have a clientHeight of 0 and im not sure why. I appreciate any help!

Here's my full JS code:

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

Your images are still in loading state, you can't get the right clientHeight. You need to handle the onload event of images and then query the clientHeight.