Question

我正在为一个网站开发一个新的照片库，我认为该画廊应该具备一些能力，包括：

使用glob仅获取特定文件夹中的jpg文件
使用延迟加载程序来提高性能和加载速度。

第一点对我来说是相当容易的任务，但是当谈到第二项任务时，我很快就会感到困惑。

由于第一个函数将遍历整个文件夹并显示它包含的所有.jpg文件，我不知道如何打破循环并在用户想要加载更多照片时恢复它。

我现在有这样的代码：

<html>
    <!--The concept on this widget is to : Check specific folder > Read & Loop thourght the whole folder > Output all the images contain > Lazy loader.
    Therefore user only needs to drag the image in the file when adding new images.!-->
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!--prevent courrption in IE!-->
    </head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <body>

        <!--------------------Tradional selector!------------>
        <!--<input type="file" id="files" name="files[]" multiple />
        <output id="list"></output>!-->

        <!-------------------drag and drop!----------------->
        <div id="drop_zone">Drop files here</div>
        <output id="list"></output>

        <?php
        foreach (glob("media/images/*.jpg") as $filename) { //glod to get .jpg files
            echo "<img src='$filename' width=auto height='500'/> "; 
        }
        ?>



        <script>
        // Check for the various File API support.
        //validator
        if (window.File && window.FileReader && window.FileList && 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('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                          f.size, ' bytes, last modified: ',
                          f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                          '</li>');
            }
            //path selector
            document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
          }

          document.getElementById('files').addEventListener('change', handleFileSelect, false);

          */
        <!----------------------Drag and drop!---------------------------!>
         function handleFileSelect(evt) {
            event.stopPropagation(); <!--jquery libraries function >
            event.preventDefault(); <!--This method does not accept any arguments. So when you drag the images it will do something else then the default action!-->

            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('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                          f.size, ' bytes, last modified: ',
                          f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                          '</li>');
            }
                //path selector
            document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
          }

          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);
        </script>
    </body>
</html>

在这种情况下我应该如何实现lazyloader？

Answer 1

为了提供答案，我假设您正在使用此插件：http://www.appelsiini.net/projects/lazyload

确保您的图片具有正确的类名，以便您可以告诉jQuery LazyLoader要查找哪些图片：

<?php
        foreach (glob("media/images/*.jpg") as $filename) { //glod to get .jpg files
            echo "<img class="lazyLoadMe" src='$filename' width=auto height='500'/> "; 
        }
?>

然后，在文档的底部添加以下内容：

  <script type="text/javascript" charset="utf-8">
    $(function() {
       $("img.lazyLoadMe").lazyload();
    });
  </script>

这会导致lazyLoader仅使用类"lazyLoadMe"延迟加载图像。

您不一定需要停止将所有img标签写入文档的php循环，因为lazyLoader会自动确保图像在滚动到视图之前不会加载。

For loop和Lazyloader

1 个答案: