lazyload rest im 420

main.js

@@ -1,21 +1,40 @@
-var options = {
-  valueNames: [
-    { data: ['series-name'] }
-  ]
-};
-var seriesList = new List('series', options);
-
-var options = {
-  valueNames: [
-    { data: ['movie-name'] }
-  ]
-};
-var movieList = new List('movies', options);
-
-$('.series-search').keyup(function() {
-    seriesList.search($(this).val());
-});
-
-$('.movie-search').keyup(function() {
-    movieList.search($(this).val());
-});
+
+
+//$( document ).ready(function() {
+
+
+jQuery.noConflict();
+(function($) {
+
+
+    var options = {
+      valueNames: [
+        { data: ['series-name'] }
+      ]
+    };
+    var seriesList = new List('series', options);
+
+    var options = {
+      valueNames: [
+        { data: ['movie-name'] }
+      ]
+    };
+    var movieList = new List('movies', options);
+
+    $('.series-search').keyup(function() {
+        seriesList.search($(this).val());
+    });
+
+    $('.movie-search').keyup(function() {
+        movieList.search($(this).val());
+    });
+
+    $("img.lazy").lazyload();
+
+
+
+})(jQuery);
+
+
+
+//});

templates/content.php

@@ -6,7 +6,10 @@
         <div class="col-sm-3" data-series-name="<?php echo $series['name']; ?>">
           <div class="image-zoom">
             <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=seasons&seriesID=<?php echo $series['id']; ?>">
-              <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $series['poster']; ?>" alt="<?php echo $series['name']; ?>">
+              <img class="lazy img-responsive" data-original="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $series['poster']; ?>" alt="<?php echo $series['name']; ?>">
+                <noscript>
+                  <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $series['poster']; ?>" alt="<?php echo $series['name']; ?>">
+                </noscript>
             </a>
           </div>
         </div>
@@ -21,7 +24,10 @@
           <div class="col-sm-3" data-movie-name="<?php echo $movie['name']; ?>">
             <div class="image-zoom">
               <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=movie&movieID=<?php echo $movie['id']; ?>">
-                <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $movie['poster']; ?>" alt="<?php echo $movie['name']; ?>">
+                <img class="lazy img-responsive" data-original="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $movie['poster']; ?>" alt="<?php echo $movie['name']; ?>">
+                <noscript>
+                  <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $movie['poster']; ?>" alt="<?php echo $movie['name']; ?>">
+                </noscript>
               </a>
             </div>
           </div>

templates/footer.php

@@ -1,6 +1,7 @@
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
-    <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>list.min.js"></script>
-    <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>main.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
+        <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>list.min.js"></script>
+        <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>jquery.lazyload.min.js"></script>
+        <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>main.js"></script>
     </body>
 </html>

templates/season.php

@@ -6,7 +6,10 @@
     <div class="col-sm-3 episode">
       <div class="image-zoom">
         <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=episode&episodeID=<?php echo $episode['id']; ?>">
-          <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $episode['thumb']; ?>" alt="<?php echo $episode['number']; ?>">
+          <img class="lazy img-responsive" data-original="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $episode['thumb']; ?>" alt="<?php echo $episode['number']; ?>">
+          <noscript>
+            <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $episode['thumb']; ?>" alt="<?php echo $episode['number']; ?>">
+          </noscript>
           <div class="episode-title"><?php echo $episode['number']; ?> - <?php echo $episode['name']; ?></div>
         </a>
       </div>

templates/seasons.php

@@ -10,7 +10,10 @@
     <div class="col-sm-3">
       <div class="image-zoom">
         <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=season&seasonID=<?php echo $season['id']; ?>">
-          <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $season['poster']; ?>" alt="<?php echo $season['number']; ?>">
+          <img class="lazy img-responsive" data-original="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $season['poster']; ?>" alt="<?php echo $season['number']; ?>">
+          <noscript>
+            <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $season['poster']; ?>" alt="<?php echo $season['number']; ?>">
+          </noscript>
         </a>
       </div>
     </div>