Fatal编程技术网
  • javascript/
  • Javascript img.height问题（每次返回0）

Javascript img.height问题（每次返回0）

javascript html

Javascript img.height问题（每次返回0）,javascript,html,Javascript,Html,我有以下html代码： <body> <div class="img-section"> </div> </body> 我需要与图像的高度。在javascript代码中，我想在页面上添加图像，然后我想使用img.height做一些事情。我尝试使用load事件，它通常运行良好（每隔10次刷新console.log（height）；返回奇怪的值，如0或完全没有）。所以我需要修复console.log（pic.height）；始终返回0

我有以下html代码：

<body>
    <div class="img-section">
    </div>
</body>
我需要与图像的高度。在javascript代码中，我想在页面上添加图像，然后我想使用img.height做一些事情。我尝试使用load事件，它通常运行良好（每隔10次刷新console.log（height）；返回奇怪的值，如0或完全没有）。所以我需要修复console.log（pic.height）；始终返回0（在加载事件的正下方）。 非常感谢。 （对不起，我的英语不好）

编辑：谢谢你的回答。但还有另一个问题。上面的代码只是我项目的一个例子。主要任务是将图像放入三个div标记中。我希望，高度问题修复将修复它，但它没有。这是我的主要项目：

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;
                    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;
                    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（“加载”，函数（）{

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;
                    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;
                    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);



doSomethingAsync(..., function() {
  // Thing A
});
// Thing B



image.addEventListener("load", function() {
  height = pic.height;
  // Do something with height
});



function waitForEvent(obj, eventName) {
  return new Promise(resolve => obj.addEventListener(eventName, resolve));
}

async function getImageHeight(image) {
  await waitForEvent(image, 'load');
  return image.height;
}

// Chaining style
getImageHeight(pic)
  .then(height => {
    // Do something with height
    return nextAsyncThing();
  })
  .then(dataFromOtherAsyncThing => {
    // ...
  });



document.addEventListener("DOMContentLoaded", async () => {
  const pic = document.createElement("img");
  pic.src = "soflogo.png";
  document.getElementsByClassName("img-section")[0].appendChild(pic);

  const height = await getImageHeight(pic)
  console.log(height);  // Should have the height
});