title: How to lazy load images vertically & horizontally?
body: <p>My website has a image grid, which has horizontal and vertical scroll. I want to load images which are vertically places first and then horizontal images, all of them lazily. </p>
  
  <p>In other words, when user scroll down vertical images should load lazily and when user scrolls horizontally images the horizontal images should load lazily. I tried using <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow noreferrer">lazyload</a>, but I'm not able to use get it working for both vertical and horizontal images container. </p>
  
  <p>Only horizontal or vertical scrolling is working at a time. I want both of them to work!</p>
  
  <p>My test code is as follows,</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.lazyload.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
      $(function() {
   $("img.lazy").lazyload({
  effect : "fadeIn",
  container: $("#hcontainer")
  });
  });
    &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  #hcontainer {
      height: 800px;
      overflow: scroll;
  }
  #inner_container {
        width: 4750px;
      }
  &lt;/style&gt;
  
  &lt;div id="vcontainer"&gt;
  &lt;div id="hcontainer"&gt;
      &lt;div id="inner_container"&gt;
            &lt;img class="lazy" data-original="1.jpg" width="765" height="574" alt="BMW M1 Hood"&gt;
            &lt;img class="lazy" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side"&gt;
            &lt;img class="lazy" data-original="3.jpg" width="765" height="574" alt="Viper 1"&gt;
            &lt;img class="lazy" data-original="4.jpg" width="765" height="574" alt="Viper Corner"&gt;
            &lt;img class="lazy" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT"&gt;
            &lt;img class="lazy" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;br/&gt;
          &lt;img class="lazy img-responsive" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side"&gt;&lt;br/&gt;
          &lt;img class="lazy img-responsive" data-original="3.jpg" width="765" height="574" alt="Viper 1"&gt;&lt;br/&gt;
          &lt;img class="lazy img-responsive" data-original="4.jpg" width="765" height="574" alt="Viper Corner"&gt;&lt;br/&gt;
          &lt;img class="lazy img-responsive" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT"&gt;&lt;br/&gt;
          &lt;img class="lazy img-responsive" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop"&gt;&lt;br/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It isn't working as I want it to be. Can anyone help me with it?</p>
  
  <p>Please see following pic for the output, I need vertical images to be loaded lazily as well, which isn't happening.
  <a href="https://i.stack.imgur.com/wCTGp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCTGp.png" alt="enter image description here"></a></p>