How to lazy load images vertically & horizontally?

Question

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.

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 lazyload, but I'm not able to use get it working for both vertical and horizontal images container.

Only horizontal or vertical scrolling is working at a time. I want both of them to work!

My test code is as follows,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
 $("img.lazy").lazyload({
effect : "fadeIn",
container: $("#hcontainer")
});
});
  </script>

<style type="text/css">
#hcontainer {
    height: 800px;
    overflow: scroll;
}
#inner_container {
      width: 4750px;
    }
</style>

<div id="vcontainer">
<div id="hcontainer">
    <div id="inner_container">
          <img class="lazy" data-original="1.jpg" width="765" height="574" alt="BMW M1 Hood">
          <img class="lazy" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side">
          <img class="lazy" data-original="3.jpg" width="765" height="574" alt="Viper 1">
          <img class="lazy" data-original="4.jpg" width="765" height="574" alt="Viper Corner">
          <img class="lazy" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT">
          <img class="lazy" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop">
        </div>
</div>
<br/>
        <img class="lazy img-responsive" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
        <img class="lazy img-responsive" data-original="3.jpg" width="765" height="574" alt="Viper 1"><br/>
        <img class="lazy img-responsive" data-original="4.jpg" width="765" height="574" alt="Viper Corner"><br/>
        <img class="lazy img-responsive" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
        <img class="lazy img-responsive" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
</div>

It isn't working as I want it to be. Can anyone help me with it?

Please see following pic for the output, I need vertical images to be loaded lazily as well, which isn't happening.

Answer 1

Add this to also assign the lazyload to the images that are not in the #hcontainer

 $(function() {
    $(":not(#hcontainer) img.lazy").lazyload({
        effect: "fadeIn"
    });

    $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#hcontainer")
     });
});

Edit:

Demo

Answer 2

I would suggest, that you try lazySizes. The big difference to other lazyloaders is, that lazySizes automatically detects visibility changes without configuration.

This allows separation of concerns, because you don't need to touch your JS lazyloader configuration, in case you change your CSS and add a scroll container or add images inside a mega menu and such things.

Everything you need to do, is to add the lazysizes script and use data-src instead of src and add the class lazyload.