markdown-it-image-defer v0.0.1

Usage

Enable plugin

var md = require('markdown-it')({
  html: true,
  linkify: true,
  typography: true
}).use(require('markdown-it-image-defer')); // <-- this use(package_name) is required

Example

![test](image.png)

is interpreted as

<p><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="test" data-src="image.png"></p>

With the following Javascript in your HTML, the image will downloaded after the initial page load.

<script>
  function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i < imgDefer.length; i++) {
      if (imgDefer[i].getAttribute('data-src')) {
        imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
      }
    }
  }

  window.onload = init;
</script>