Merge pull request #8 from notiz-dev/enhancements/calculate-image-sizes

calculate image sizes

Author: marcjulian

.gitignore

@@ -51,3 +51,5 @@ src/assets/scully-routes.json
 # firebase
 .firebase/
 firebase-debug.log
+
+scully.scully-plugins.config.js

package-lock.json

@@ -4,6 +4,8 @@
 
 `scully-plugin-lazy-images` is a `postRenderer` plugin for [Scully](http://scully.io/) turning your images into lazy loading images using [lazyload](https://github.com/tuupola/lazyload). This will replace the `src` attribute with `data-src` and adds the class `lazyload` to the `img` tag.
 
+The content around an image changes after the image is **lazily** loaded. To prevent the content to "jump" after loading, the `height` and `width` of the image is calculated and a placeholder `svg` is added to the `src` attribute with the image dimensions. The `svg` placeholder is replaced with the actual image after it is loaded. 
+
 A browser [native approach](https://web.dev/native-lazy-loading/) would be to use `loading="lazy"` for each `img` tag. When it has broader [browser support](https://caniuse.com/#feat=loading-lazy-attr) we will switch to the native approach.
 
 ## 📦 Installation

plugins/lazy-images/README.md

@@ -1,6 +1,6 @@
 {
   "name": "@notiz/scully-plugin-lazy-images",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "scully plugin to add lazy loading for images",
   "main": "src/index.js",
   "author": "notiz.dev",
@@ -32,6 +32,8 @@
     "@scullyio/scully": ">=0.0.75"
   },
   "dependencies": {
+    "axios": "^0.19.2",
+    "image-size": "^0.8.3",
     "jsdom": "^16.2.1"
   }
 }

plugins/lazy-images/package-lock.json

@@ -1,36 +1,56 @@
 const { JSDOM } = require('jsdom');
+const { get } = require('axios');
+var sizeOf = require('image-size');
+const { scullyConfig } = require('@scullyio/scully');
+const path = require('path');
 
 const lazyImagesPlugin = async (html, route) => {
   const dom = new JSDOM(html);
   const doc = dom.window.document;
 
-  makeImageLazyload(doc);
-
+  await makeImageLazyload(doc, route);
   doc.body.append(loadLazyload(doc));
   doc.body.append(createLazyImageScript(doc));
 
   return dom.serialize();
 };
 
-const makeImageLazyload = (doc) => {
+const makeImageLazyload = async (doc, route) => {
   var imgEl = doc.getElementsByTagName('img');
 
   // can be added when loading="lazy" is supported in more browsers
   //   for (var i = 0; i < imgEl.length; i++) {
   //     imgEl[i].setAttribute('loading', 'lazy');
   //   }
-
   for (var i = 0; i < imgEl.length; i++) {
-    if (imgEl[i].getAttribute('src')) {
-      imgEl[i].setAttribute('data-src', imgEl[i].getAttribute('src'));
-      imgEl[i].removeAttribute('src');
+    const src = imgEl[i].getAttribute('src');
+    let dimensions = { width: 0, height: 0 };
+    if (src) {
+      if (src.startsWith('http')) {
+        try {
+          const image = await get(src, {
+            responseType: 'arraybuffer',
+          });
+          dimensions = sizeOf(image.data);
+          imgEl[i].setAttribute('height', dimensions.height);
+          imgEl[i].setAttribute('width', dimensions.width);
+        } catch (err) {}
+      } else {
+        dimensions = sizeOf(path.join(scullyConfig.outDir, src));
+        imgEl[i].setAttribute('height', dimensions.height);
+        imgEl[i].setAttribute('width', dimensions.width);
+      }
+      imgEl[i].setAttribute('data-src', src);
+      imgEl[i].setAttribute(
+        'src',
+        `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${dimensions.width} ${dimensions.height}'%3E%3C/svg%3E`
+      );
       imgEl[i].classList.add('lazyload');
     }
   }
 };
 
 const loadLazyload = (doc) => {
-  
   const lazyload = doc.createElement('script');
   lazyload.src = 'https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js';
   return lazyload;