Example: Horizontal Scroll

This example shows Lazy's ability to load horizontal oriented elements as well. As shown here, the image are wrapped in a div container. In a real environment there is no need to do it this way. Just arrange the elements horizontal on your page. 


    <div class="container">
      <img class="lazy" data-src="images/1.jpg" />
      <img class="lazy" data-src="images/2.jpg" />
      <img class="lazy" data-src="images/3.jpg" />
      <img class="lazy" data-src="images/4.jpg" />
      <img class="lazy" data-src="images/5.jpg" />
      <img class="lazy" data-src="images/6.jpg" />
      <img class="lazy" data-src="images/7.jpg" />
      <img class="lazy" data-src="images/8.jpg" />
      <img class="lazy" data-src="images/9.jpg" />
      <img class="lazy" data-src="images/0.jpg" />
    </div>
                  

    div.container {
        white-space: nowrap;
    }

    img.lazy {
        width: 700px; 
        height: 467px; 
        display: inline-block;
    }
                  

    $(function() {
        $('.lazy').lazy();
    });

 

Note: All examples verbose their actions to the sidebar on the left and even to your browsers console by console.log. Check the output there (hit F12 key to open your browsers dev tools).