Example: Elements Inside a Container

Sometimes you may store elements in an container like a <div>. The problem is, that the window scroll event is not trigger the loading of images in there. For this case you will need the appendScroll parameter of Lazy. 


    <div id="lazy-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#lazy-container {
        width: 800px;
        height: 800px;
        overflow: auto;
    }

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

    $(function() {
        $('#lazy-container .lazy').lazy({
            appendScroll: $('#lazy-container')
        });
    });

 

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

Demonstration