Preventing image reflow (fix #351)

_includes/refactor-content.html

@@ -35,8 +35,10 @@
   %}
 {% endif %}
 
+
 {% if _content contains '<img src="' %}
 
+  <!-- add CDN prefix if it exists -->
   {% if site.img_cdn != '' %}
     {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
   {% else %}
@@ -46,16 +48,53 @@
   {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
 
   <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-  {% assign img_placehodler
-    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
+  {% assign _content = _content | replace: '<img src="', '<img data-src="' %}
 
-  {% assign lozad_replacement = '<img src="'
-    | append: img_placehodler
-    | append: '" data-src="' %}
+  <!-- add image placehoder to prevent layout reflow -->
 
-  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+  {% assign _img_content = nil %}
+
+  {% assign _images = _content | split: '<img ' %}
+
+  {% for _img in _images %}
+    {% if forloop.first %}
+      {% assign _img_content = _img %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _attrs = _img | split: '>' | first | split: ' ' %}
+
+    {% for _attr in _attrs %}
+      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
+      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'width' %}
+          {% assign _width = _value %}
+        {% when 'height' %}
+          {% assign _height = _value %}
+      {% endcase %}
+
+      {% if _width and _height %}
+        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
+        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
+        {% break %}
+      {% endif %}
+
+    {% endfor %}
+
+    {% unless _width and _height %}
+      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
+    {% endunless %}
+
+  {% endfor %}
+
+  {% assign _content = _img_content %}
 
 {% endif %}
 
+
 <!-- return -->
 {{ _content }}