title: For loop and Lazyloader
body: <p>I am developing a new photo gallery for a website, and I consider the gallery should have some abilities including:</p>
  
  <ol>
  <li>Using glob to get only jpg files in specific folder </li>
  <li>Using lazy loader to improve the performance and loading speed.</li>
  </ol>
  
  <p>The first bit is fairly easy task for me, but when it comes to the second task I am quick confuse.</p>
  
  <p>Since the first function will loop thorough the whole folder and display all .jpg file it contains, I have no idea how to break the loop and resume it when user wants to load more photos.</p>
  
  <p>I have my codes like this at the moment:</p>
  
  <pre><code>&lt;html&gt;
      &lt;!--The concept on this widget is to : Check specific folder &gt; Read &amp; Loop thourght the whole folder &gt; Output all the images contain &gt; Lazy loader.
      Therefore user only needs to drag the image in the file when adding new images.!--&gt;
      &lt;head&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt; &lt;!--prevent courrption in IE!--&gt;
      &lt;/head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
      &lt;body&gt;
  
          &lt;!--------------------Tradional selector!------------&gt;
          &lt;!--&lt;input type="file" id="files" name="files[]" multiple /&gt;
          &lt;output id="list"&gt;&lt;/output&gt;!--&gt;
  
          &lt;!-------------------drag and drop!-----------------&gt;
          &lt;div id="drop_zone"&gt;Drop files here&lt;/div&gt;
          &lt;output id="list"&gt;&lt;/output&gt;
  
          &lt;?php
          foreach (glob("media/images/*.jpg") as $filename) { //glod to get .jpg files
              echo "&lt;img src='$filename' width=auto height='500'/&gt; "; 
          }
          ?&gt;
  
  
  
          &lt;script&gt;
          // Check for the various File API support.
          //validator
          if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {
            // Great success! All the File APIs are supported.
           // alert('working');
          } else {
            //alert('The File APIs are not fully supported in this browser.');
          }
  
          /*=======================standrad file selector====================
  
           function handleFileSelect(evt) { 
              var files = evt.target.files; // FileList object, MSDN standrad , a selector 
  
              // files is a FileList of File objects. List some properties.
              var output = []; //This is an empty Array ! the result/output will be store in array 
  
              for (var i = 0, f; f = files[i]; i++) {
              //The push() method adds new items to the end of an array, and returns the new length.
              //example banana.push | banana is juz a var declare on top .push()is the method
                output.push('&lt;li&gt;&lt;strong&gt;', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
                            f.size, ' bytes, last modified: ',
                            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                            '&lt;/li&gt;');
              }
              //path selector
              document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';
            }
  
            document.getElementById('files').addEventListener('change', handleFileSelect, false);
  
            */
          &lt;!----------------------Drag and drop!---------------------------!&gt;
           function handleFileSelect(evt) {
              event.stopPropagation(); &lt;!--jquery libraries function &gt;
              event.preventDefault(); &lt;!--This method does not accept any arguments. So when you drag the images it will do something else then the default action!--&gt;
  
              var files = evt.dataTransfer.files; // FileList object.
  
              // files is a FileList of File objects. List some properties.
              var output = [];//This is an empty Array ! the result/output will be store in array 
  
              for (var i = 0, f; f = files[i]; i++) {
                output.push('&lt;li&gt;&lt;strong&gt;', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
                            f.size, ' bytes, last modified: ',
                            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                            '&lt;/li&gt;');
              }
                  //path selector
              document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';
            }
  
            function handleDragOver(evt) {
              evt.stopPropagation();
              evt.preventDefault();
              evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  
              // ^The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. 
  
              /*There's few value rather than copy:
  
              copy: A copy of the source item is made at the new location.
              move: An item is moved to a new location.
              link: A link is established to the source at the new location.
              none: The item may not be dropped.
              */
            }
  
            // Setup the dnd listeners.
            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How should i implement lazyloader under this situation?  </p>