unviel.js difficulty

unviel.js difficulty

hey guys , there is this very simple pluggin called unviel.js for lazy loading . i have used it in a few of my projects but i would like to understand it better a bit . 

below is an example that actually works . 

basically what u do is , just take a gif image and load it in the src attribute and than in another data-src attribute you actually insert the image you actually want to display. 

and than you run the pluggin with the following peice of code : 

  2. $( document ).ready( function () { 
  3.   $( "img" ).unveil(); 
  4. });
below is an example that actually works . 

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Test</title>

  8. <script src="js/jquery.min.js"></script>
  9. <script src="js/jquery.unveil.js"></script>
  10. <script src="js/test.js"></script>



  14. <style>
  15. body{
  16. background:#eee;
  17. }
  18. .main{
  19. width: 800px;
  20. margin: 0 auto;
  21. text-align: center;
  22. }

  24. .main img{
  25. width: 100%;
  26. max-width: 700px;
  27. border: 10px solid #fff;
  28. box-shadow: 1px 1px 10px rgba(0,0,0,.5);

  30.  }

  32. .main figure{
  33. margin-top: 20%;
  34. }

  36. </style>

  38. </head>


  41. <body> 

  43. <div class="main">

  45. <figure>
  46. <img src="img/loading.png" data-src="img/1.png">
  47. <figcaption>I am a caption </figcaption>
  48. </figure>

  50. <figure>
  51. <img src="img/loading.png" data-src="img/2.jpg">
  52. <figcaption>I am a caption </figcaption>
  53. </figure>

  55. <figure>
  56. <img src="img/loading.png" data-src="img/3.jpg">
  57. <figcaption>I am a caption </figcaption>
  58. </figure>


  61. <figure>
  62. <img src="img/loading.png" data-src="img/html5.png">
  63. <figcaption>I am a caption </figcaption>
  64. </figure>

  66. <figure>
  67. <img src="img/loading.png" data-src="img/1.png">
  68. <figcaption>I am a caption </figcaption>
  69. </figure>

  71. <figure>
  72. <img src="img/loading.png" data-src="img/2.jpg">
  73. <figcaption>I am a caption </figcaption>
  74. </figure>

  76. </div>

  78. <script>
  79. $(document).ready(function(){
  80. $('img').unveil(600);
  81. }); // ready
  82. </script>

  84. </body>
  85. </html>                                

if the codes to messy , see it on pastebin . 


now when going through the documentation , i saw a few usages of this pluggin that i did't quite understand . 

  1. eg .  $( "img" ).trigger( "unveil" );
what would that line really do ?? what more can i do , than just lazy load with this pluggin ?? 

its a pritty small pluggin , just liek 50 lines of code , but seems to be pritty handy . 

documentation can be found : docs for unviel. 

code can be found here : pluggin on git