markdown-it-plugin-data-src
Tiny plugin that replaces src
attributes on Markdown images with data-src
for use with Lozad.js to lazy load all images by default.
The problem
Images slow down your website. Why not lazy load all of them by default?
This solution
This plugin will automatically get your images ready for Lozad to lazy load them all by default.
Note: if you need to support users without JavaScript, you can simply add a
<noscript>
element underneath your image with a standard<img>
element with asrc
attribute.
What this plugin is not
A lazy-loading library. This library will prep your images for use with Lozad.js. You'll need to install Lozad.js for your images to load with this plugin.
Table of Contents
Installation
npm install markdown-it-plugin-data-src
Usage
CommonJS plugin example
const md =
ES6 Module plugin example
const md =
Then simply install Lozad.js as you normally would and run it on all images.
Inline HTML Lozad example
ES6 Module Lozad example
// Get all image tags and run Lozad lazy loading on themconst images = documentconst observer = ; observer;
License
MIT
Copyright 2018 Sean W. Lawrence - visit my portfolio