title: How to use load event and img.height properly
body: <p><a href="https://i.stack.imgur.com/uW3ZA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uW3ZA.png" alt="Good values[![Weird values - red marks"></a>]<a href="https://i.stack.imgur.com/kAD7v.png" rel="nofollow noreferrer">2</a>I have the following code: </p>
  
  <pre><code>&lt;div class="flexed row"&gt;
              &lt;div class="column1 flexed column"&gt;
  
              &lt;/div&gt;
              &lt;div class="column2 flexed column"&gt;
  
              &lt;/div&gt;
              &lt;div class="column3 flexed column"&gt;
  
              &lt;/div&gt;
              &lt;div class="img-section"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And this kinda huge javascript: </p>
  
  <pre><code>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 &lt;= column2Lenth) &amp;&amp; (column1Lenth &lt;= column3Lenth)) {
                          column1Lenth += height;
                          source = document.getElementsByClassName("column1")[0];
                          source.appendChild(pic);
                      }
                      else if (((column2Lenth &lt; column1Lenth) &amp;&amp; (column2Lenth &lt;= column3Lenth))) {
                          column2Lenth += height;
                          source = document.getElementsByClassName("column2")[0];
                          source.appendChild(pic);
                      }
                      else if ((column3Lenth &lt; column1Lenth) &amp;&amp; (column3Lenth &lt; 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 &lt;= column2Lenth) &amp;&amp; (column1Lenth &lt;= column3Lenth)) {
                          column1Lenth += height;
                          source = document.getElementsByClassName("column1")[0];
                          source.appendChild(pic);
                      }
                      else if (((column2Lenth &lt; column1Lenth) &amp;&amp; (column2Lenth &lt;= column3Lenth))) {
                          column2Lenth += height;
                          source = document.getElementsByClassName("column2")[0];
                          source.appendChild(pic);
                      }
                      else if ((column3Lenth &lt; column1Lenth) &amp;&amp; (column3Lenth &lt; column2Lenth)) {
                          column3Lenth += height;
                          source = document.getElementsByClassName("column3")[0];
                          source.appendChild(pic);
                      }
                  })
              }
          }
      }
  }
  document.addEventListener("DOMContentLoaded", init);
  </code></pre>
  
  <p>The task is to put the images into the <code>&lt;div&gt;</code>s tags according to their height. So I need to work with img.height. I used load event, which USUALLY work well, but when I refresh the site like 10th times, the height is 0 atleast once. You can try that an your own. So I need help with this little issue => I need to have img.height everytime right number, not 0. 
  Thank you for your help.</p>