Javascript img.height随机返回0，尽管我使用了加载事件

我贴出了那个问题，但没人回答，所以我想我解释得不够。所以我会再试一次。 我有以下html：

<div class="flexed row">
            <div class="column1 flexed column">

            </div>
            <div class="column2 flexed column">

            </div>
            <div class="column3 flexed column">

            </div>
            <div class="img-section">

            </div>
        </div>

和javascript：

const init = function () {

    let allGalleryData = [{
        galleryName: "Terénní seminář 2015",
        galleryThumbnailUrl: "gallery/Fotoseminar2015/",
        galleryFullSizeUrl: "gallery/Fotoseminar2015/big",
        galleryImages: [
            { url: '01.jpg', title: 'something', stars: 2.5, people: 91 },
            { url: '02.jpg', title: 'something', stars: 2.9, people: 42 },
            { url: '03.jpg', title: 'something', stars: 5, people: 19 },
            { url: '04.jpg', title: 'something', stars: 1.6, people: 31 },
            { url: '05.jpg', title: 'something', stars: 3.2, people: 20 },
            { url: '06.jpg', title: 'something', stars: 4.1, people: 43 },
            { url: '07.jpg', title: 'something', stars: 2.2, people: 21 },
            { url: '08.jpg', title: 'something', stars: 3.1, people: 82 },
            { url: '09.jpg', title: 'something', stars: 3.7, people: 18 },
            { url: '10.jpg', title: 'something', stars: 2.1, people: 58 },
            { url: '11.jpg', title: 'something', stars: 4.8, people: 98 },
            { url: '12.jpg', title: 'something', stars: 1.8, people: 25 },
            { url: '13.jpg', title: 'something', stars: 2.5, people: 41 },
            { url: '14.jpg', title: 'something', stars: 4.4, people: 33 },
            { url: '15.jpg', title: 'something', stars: 4.1, people: 28 },
            { url: '16.jpg', title: 'something', stars: 2.1, people: 53 },
            { url: '17.jpg', title: 'something', stars: 2.7, people: 24 },
            { url: '18.jpg', title: 'something', stars: 1.1, people: 72 },
            { url: '19.jpg', title: 'something', stars: 3.5, people: 96 },
            { url: '20.jpg', title: 'something', stars: 2.4, people: 3 },
            { url: '21.jpg', title: 'something', stars: 4.6, people: 32 },
            { url: '22.jpg', title: 'something', stars: 3.1, people: 45 },
            { url: '23.jpg', title: 'something', stars: 3.2, people: 23 },
            { url: '24.jpg', title: 'something', stars: 4.8, people: 19 },
            { url: '25.jpg', title: 'something', stars: 3.8, people: 13 },
            { url: '26.jpg', title: 'something', stars: 4.7, people: 71 },
            { url: '27.jpg', title: 'something', stars: 2.3, people: 96 },
            { url: '28.jpg', title: 'something', stars: 1.5, people: 84 },
            { url: '29.jpg', title: 'something', stars: 1.3, people: 13 }
        ]
    },
    {
        galleryName: "Skotsko 2014",
        galleryThumbnailUrlS: "gallery/Skotsko/",
        galleryFullSizeUrl: "gallery/Skotsko/big",
        galleryImagesNameUrl: [
            { url: 'Sk2014_01.JPG', title: 'Kanál v Amsterodamu', stars: 1.1, people: 24 },
            { url: 'Sk2014_02.JPG', title: 'Amsterodam (pobřeží)', stars: 3.4, people: 36 },
            { url: 'Sk2014_03.JPG', title: 'Trajekt do UK', stars: 1.3, people: 16 },
            { url: 'Sk2014_04.JPG', title: 'Pobřeží Skotska', stars: 3, people: 35 },
            { url: 'Sk2014_05.JPG', title: 'Urquhart Castle', stars: 2.3, people: 38 },
            { url: 'Sk2014_06.JPG', title: 'Břeh jezera', stars: 2.4, people: 50 },
            { url: 'Sk2014_07.JPG', title: 'Eilean Donan Castle', stars: 3.1, people: 31 },
            { url: 'Sk2014_08.JPG', title: 'Skotský skot', stars: 3.1, people: 40 },
            { url: 'Sk2014_09.JPG', title: 'The Old Man of Storr, Skye', stars: 2.9, people: 68 },
            { url: 'Sk2014_10.JPG', title: 'The Old Man of Storr, Skye', stars: 5, people: 71 },
            { url: 'Sk2014_11.JPG', title: 'Culloden', stars: 3.6, people: 45 },
            { url: 'Sk2014_12.JPG', title: 'Cawdor Castle', stars: 3.7, people: 31 },
            { url: 'Sk2014_13.JPG', title: 'Cairn Gorm', stars: 4.8, people: 77 },
            { url: 'Sk2014_14.JPG', title: 'Cairngorms National Park', stars: 4.8, people: 64 },
            { url: 'Sk2014_15.JPG', title: 'Tower Bridge', stars: 2.9, people: 61 },
            { url: 'Sk2014_16.JPG', title: 'Butler\'s Wharf', stars: 3.7, people: 78 },
            { url: 'Sk2014_17.JPG', title: 'London Eye', stars: 1.4, people: 85 },
            { url: 'Sk2014_18.JPG', title: 'Covent garden market - London', stars: 1.4, people: 76 },
            { url: 'Sk2014_19.JPG', title: 'Buckinghamský palác', stars: 2.4, people: 24 },
            { url: 'Sk2014_20.JPG', title: 'Big Ben London', stars: 4.2, people: 91 },
            { url: 'Sk2014_21.JPG', title: 'Big Ben London', stars: 3.5, people: 39 },
            { url: 'Sk2014_22.JPG', title: 'Big Ben London', stars: 3.7, people: 83 }
        ]
    }
    ]
    let column1Lenth = 0;
    let column2Lenth = 0;
    let column3Lenth = 0;
    let height;
    let source;
    let path;
    let image;
    for (const i of allGalleryData) {
        let seminar = i.galleryThumbnailUrl;
        let skotsko = i.galleryThumbnailUrlS;
        if (i.galleryImages) {
            for (const img of i.galleryImages) {
                path = seminar + img.url;
                let pic = document.createElement("img");
                pic.src = path;
                image = document.querySelector("img");
                image.addEventListener("load", function () {
                    height = pic.height;


                    //
                    console.log(height);//this should always return some number, but not a 0
                    //


                    if ((column1Lenth <= column2Lenth) && (column1Lenth <= column3Lenth)) {
                        column1Lenth += height;
                        source = document.getElementsByClassName("column1")[0];
                        source.appendChild(pic);
                    }
                    else if (((column2Lenth < column1Lenth) && (column2Lenth <= column3Lenth))) {
                        column2Lenth += height;
                        source = document.getElementsByClassName("column2")[0];
                        source.appendChild(pic);
                    }
                    else if ((column3Lenth < column1Lenth) && (column3Lenth < column2Lenth)) {
                        column3Lenth += height;
                        source = document.getElementsByClassName("column3")[0];
                        source.appendChild(pic);
                    }
                })
            }
        }
        else {
            for (const img of i.galleryImagesNameUrl) {
                path = skotsko + img.url;
                let pic = document.createElement("img");
                pic.src = path;
                image = document.querySelector("img");
                image.addEventListener("load", function () {
                    height = pic.height;


                    //
                    console.log(height);//this should always return some number, but not a 0
                    //


                    if ((column1Lenth <= column2Lenth) && (column1Lenth <= column3Lenth)) {
                        column1Lenth += height;
                        source = document.getElementsByClassName("column1")[0];
                        source.appendChild(pic);
                    }
                    else if (((column2Lenth < column1Lenth) && (column2Lenth <= column3Lenth))) {
                        column2Lenth += height;
                        source = document.getElementsByClassName("column2")[0];
                        source.appendChild(pic);
                    }
                    else if ((column3Lenth < column1Lenth) && (column3Lenth < column2Lenth)) {
                        column3Lenth += height;
                        source = document.getElementsByClassName("column3")[0];
                        source.appendChild(pic);
                    }
                })
            }
        }
    }
}
document.addEventListener("DOMContentLoaded", init);

const init=函数（）{
设allGalleryData=[{
galleryName:“Terénníseminář2015”，
galleryThumbnailUrl:“gallery/Fotoseminar2015/”，
galleryFullSizeUrl：“画廊/Fotoseminar2015/大型”，
画廊图片：[
{url:'01.jpg'，title:'something'，stars:2.5，people:91}，
{url:'02.jpg'，title:'something'，stars:2.9，people:42}，
{url:'03.jpg'，标题：'something'，明星：5，人物：19}，
{url:'04.jpg'，title:'something'，stars:1.6，people:31}，
{url:'05.jpg'，标题：'something'，明星：3.2，人物：20}，
{url:'06.jpg'，title:'something'，stars:4.1，people:43}，
{url:'07.jpg'，title:'something'，stars:2.2，people:21}，
{url:'08.jpg'，title:'something'，stars:3.1，people:82}，
{url:'09.jpg'，title:'something'，stars:3.7，people:18}，
{url:'10.jpg'，title:'something'，stars:2.1，people:58}，
{url:'11.jpg'，title:'something'，stars:4.8，people:98}，
{url:'12.jpg'，title:'something'，stars:1.8，people:25}，
{url:'13.jpg'，title:'something'，stars:2.5，people:41}，
{url:'14.jpg'，title:'something'，stars:4.4，people:33}，
{url:'15.jpg'，title:'something'，stars:4.1，people:28}，
{url:'16.jpg'，title:'something'，stars:2.1，people:53}，
{url:'17.jpg'，title:'something'，stars:2.7，people:24}，
{url:'18.jpg'，title:'something'，stars:1.1，people:72}，
{url:'19.jpg'，title:'something'，stars:3.5，people:96}，
{url:'20.jpg'，title:'something'，stars:2.4，people:3}，
{url:'21.jpg'，title:'something'，stars:4.6，people:32}，
{url:'22.jpg'，title:'something'，stars:3.1，people:45}，
{url:'23.jpg'，title:'something'，stars:3.2，people:23}，
{url:'24.jpg'，title:'something'，stars:4.8，people:19}，
{url:'25.jpg'，title:'something'，stars:3.8，people:13}，
{url:'26.jpg'，title:'something'，stars:4.7，people:71}，
{url:'27.jpg'，title:'something'，stars:2.3，people:96}，
{url:'28.jpg'，title:'something'，stars:1.5，people:84}，
{url:'29.jpg'，title:'something'，stars:1.3，people:13}
]
},
{
厨房名称：“Skotsko 2014”，
GalleryThumbnailURL:“gallery/Skotsko/”，
galleryFullSizeUrl：“画廊/Skotsko/big”，
galleryImagesNameUrl：[
{url:'Sk2014_01.JPG'，标题：'Kanál v Amsterrodamu'，明星：1.1，人物：24}，
{url:'Sk2014_02.JPG'，标题：'amsterrodam（pobřeží'），明星：3.4，人物：36}，
{url:'Sk2014_03.JPG'，标题：'Trajekt do UK'，明星：1.3，人物：16}，
{url:'Sk2014_04.JPG'，标题：'PobřežíSkotska'，明星：3，人物：35}，
{url:'Sk2014_05.JPG'，标题：'Urquhart Castle'，明星：2.3，人物：38}，
{url:'Sk2014_06.JPG'，标题：'Břeh jezera'，明星：2.4，人物：50}，
{url:'Sk2014_07.JPG'，标题：'Eilian Donan Castle'，明星：3.1，人物：31}，
{url:'Sk2014_08.JPG'，标题：'Skotskýskot'，明星：3.1，人物：40}，
{url:'Sk2014_09.JPG'，标题：'The Old Man of Storr，Skye'，明星：2.9，人物：68}，
{url:'Sk2014_10.JPG'，标题：'The Old Man of Storr，Skye'，明星：5，人物：71}，
{url:'Sk2014_11.JPG'，标题：'Culloden'，明星：3.6，人物：45}，
{url:'Sk2014_12.JPG'，标题：'Cawdor Castle'，明星：3.7，人物：31}，
{url:'Sk2014_13.JPG'，标题：'Cairn Gorm'，明星：4.8，人物：77}，
{url:'Sk2014_14.JPG'，标题：'Cairngorms国家公园'，明星：4.8，人物：64}，
{url:'Sk2014_15.JPG'，标题：'Tower Bridge'，明星：2.9，人物：61}，
{url:'Sk2014_16.JPG'，标题：'Butler's Wharf'，明星：3.7，人物：78}，
{url:'Sk2014_17.JPG'，标题：'London Eye'，明星：1.4，人物：85}，
{url:'Sk2014_18.JPG'，标题：'Covent garden market-伦敦'，明星：1.4，人物：76}，
{url:'Sk2014_19.JPG'，标题：'Buckinghamskýpalác'，明星：2.4，人物：24}，
{url:'Sk2014_20.JPG'，标题：'Big Ben London'，明星：4.2，人物：91}，
{url:'Sk2014_21.JPG'，标题：'Big Ben London'，明星：3.5，人物：39}，
{url:'Sk2014_22.JPG'，标题：'Big Ben London'，明星：3.7，人物：83}
]
}
]
设column1Lenth=0；
设column2Lenth=0；
设第3列长度=0；
让高度；
让源；
让路；
让形象；
用于（所有GalleryData的常数i）{
让研讨会=i.galleryThumbnailUrl；
设skotsko=i.gallerythumbnailurl；
如果（i.画廊图像）{
用于（i.galleryImages的常数）{
路径=研讨会+img.url；
设pic=document.createElement（“img”）；
pic.src=路径；
image=document.querySelector（“img”）；
image.addEventListener（“加载”，函数（）{
高度=图片高度；
//
console.log（height）；//这应该总是返回一些数字，但不是0
//
如果（（column1Lenth）再次在
load
方法中使用
console.log（image.height）进行测试；
。@palaѕѕаn我试过了。效果不错，但是
console.log（image.height）；
总是返回相同的数字。因此，图像高度不会改变