Example: Make Use Of Effects

Effects are a nice way to show up things on web pages. Maybe you want a show-up effect for your lazy loaded elements. Therefor you can use the effect and effectTime parameters to set an effect and the animation duration.

As effect, you can take all effects that jQuery provides. The time can be specified as milliseconds, or with jQuery constants like slow and fast.

To view the effect animation correctly you should set the threshold to zero. Otherwise the effects starts outside of the view. 


    <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" />
                  

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

    $(function() {
        $('.lazy').lazy({
          effect: "fadeIn",
          effectTime: 2000,
          threshold: 0
        });
    });

 

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