Implement lazy loading on theme page

ChengFR · Aug 1, 2017 · 4a541a3 · 4a541a3
1 parent 37a5cda
commit 4a541a3
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 16 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -10,19 +10,15 @@ var gulpUniqueFiles = require('gulp-unique-files');
 var gulpUseRef = require('gulp-useref');
 var gulpCleanCSS = require('gulp-clean-css');
 var gulpResponsive = require('gulp-responsive');
-var gulpImgRetina = require('gulp-img-retina');
+var gulpCheerio = require('gulp-cheerio');
 var del = require('del');
+var rename = require('rename');
 
 var dirs = {
   public: 'public',
   screenshots: 'public/build/screenshots'
 };
 
-var retinaSuffix = {
-  1: '',
-  2: '@2x'
-};
-
 gulp.task('useref', ['screenshot'], function() {
   var assets = gulpUseRef.assets({
     searchPath: 'public'
@@ -55,15 +51,32 @@ gulp.task('screenshot:rev', ['screenshot:clean'], function() {
 });
 
 gulp.task('screenshot:revreplace', ['screenshot:rev'], function() {
+  var destDir = '/build/screenshots';
+
   return gulp.src([dirs.screenshots + '/rev-manifest.json', 'public/themes/index.html'])
     .pipe(gulpRevCollector({
       replaceReved: true,
       dirReplacements: {
-        '/themes/screenshots': '/build/screenshots'
+        '/themes/screenshots': destDir
       }
     }))
-    .pipe(gulpImgRetina({
-      suffix: retinaSuffix
+    .pipe(gulpCheerio(function($, file) {
+      $('img.plugin-screenshot-img.lazyload').each(function() {
+        var img = $(this);
+        var src = img.attr('data-src') || img.attr('data-org');
+        if (!src) return;
+
+        var jpgPath = replaceBackSlash(rename(src, {extname: '.jpg'}));
+        var jpg2xPath = replaceBackSlash(rename(jpgPath, {suffix: '@2x'}));
+        var srcset = [
+          jpgPath,
+          jpg2xPath + ' 2x'
+        ].join(', ');
+
+        img.attr('data-src', jpgPath)
+          .attr('data-srcset', srcset)
+          .attr('data-org', src);
+      });
     }))
     .pipe(gulp.dest('public/themes'));
 });
@@ -73,19 +86,30 @@ gulp.task('screenshot:resize', ['screenshot:rev'], function() {
     .pipe(gulpResponsive({
       '*.png': [
         {
-          width: 400
+          width: '50%',
+          rename: {
+            extname: '.jpg'
+          }
         },
         {
           rename: {
-            suffix: retinaSuffix[2]
+            suffix: '@2x',
+            extname: '.jpg'
           }
         }
       ]
     }, {
-      progressive: true
+      progressive: true,
+      format: 'jpeg',
+      quality: 70,
+      stats: false
     }))
     .pipe(gulp.dest(dirs.screenshots));
 });
 
 gulp.task('screenshot', ['screenshot:rev', 'screenshot:resize', 'screenshot:revreplace']);
 gulp.task('default', ['useref', 'screenshot']);
+
+function replaceBackSlash(str) {
+  return str.replace(/\\/g, '/');
+}
diff --git a/package.json b/package.json
@@ -29,15 +29,16 @@
     "eslint": "^4.3.0",
     "eslint-config-hexo": "^2.0.0",
     "gulp": "^3.9.1",
+    "gulp-cheerio": "^0.6.2",
     "gulp-clean-css": "^3.7.0",
     "gulp-if": "^2.0.0",
-    "gulp-img-retina": "0.0.4",
     "gulp-responsive": "^2.8.0",
     "gulp-rev": "^6.0.1",
     "gulp-rev-collector": "^1.0.2",
     "gulp-rev-replace": "^0.4.3",
     "gulp-uglify": "^1.5.3",
     "gulp-unique-files": "^0.1.2",
-    "gulp-useref": "^2.1.0"
+    "gulp-useref": "^2.1.0",
+    "rename": "^1.0.4"
   }
 }
diff --git a/themes/navy/layout/partial/after_footer.swig b/themes/navy/layout/partial/after_footer.swig
@@ -7,6 +7,8 @@
 {% if page.layout === 'plugins' %}
 <!-- Plugin search -->
 <script src="https://cdn.jsdelivr.net/lunr/0.6.0/lunr.min.js"></script>
+<!-- Lazy load -->
+<script async src="https://cdn.jsdelivr.net/lazysizes/3.0.0/lazysizes.min.js"></script>
 <!-- build:js build/js/plugins.js -->
 {{ js('js/plugins') }}
 <!-- endbuild -->

diff --git a/themes/navy/layout/partial/theme.swig b/themes/navy/layout/partial/theme.swig
@@ -1,6 +1,9 @@
 <li class="plugin on">
   <div class="plugin-screenshot">
-    <img src="{{ url_for('themes/screenshots/' + plugin.name + '.png') }}" class="plugin-screenshot-img" alt="{{ plugin.name }}">
+    <noscript>
+      <img src="{{ url_for('themes/screenshots/' + plugin.name + '.png') }}" class="plugin-screenshot-img" alt="{{ plugin.name }}">
+    </noscript>
+    <img data-src="{{ url_for('themes/screenshots/' + plugin.name + '.png') }}" data-sizes="auto" class="plugin-screenshot-img lazyload" alt="{{ plugin.name }}">
     {% if plugin.preview %}
     <a href="{{ plugin.preview }}" class="plugin-preview-link" target="_blank"><i class="fa fa-eye"></i></a>
     {% endif %}

diff --git a/themes/navy/source/css/_partial/plugins.styl b/themes/navy/source/css/_partial/plugins.styl
@@ -90,7 +90,13 @@
   top: 0
   left: 0
   width: 100%
-  height: auto
+  height: 100%
+  transition: opacity 0.3s
+  &.lazyload
+  &.lazyloading
+    opacity: 0
+  &.lazyloaded
+    opacity: 1
 
 .plugin-preview-link
   position: absolute