markdown-it-plugin-data-src
v1.0.0
Replaces <image> 'src' attributes with 'data-src' for use with Lozad.js to lazy-load all images by default.
0/weekUpdated 3 years agoMITUnpacked: 1.1 MB
Published by Sean W. Lawrence
npm install markdown-it-plugin-data-srcmarkdown-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.
!GitHub issues
!npm bundle size (minified + gzip)
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 element underneath your image with a standard src 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
- The problem
- This solution
- What this plugin is not
- Table of Contents
- Installation
- Usage
- CommonJS plugin example
- ES6 Module plugin example
- Inline HTML Lozad example
- ES6 Module Lozad example
- License
Installation
npm install markdown-it-plugin-data-src
Usage
$3
``javascript`
const md = require('markdown-it')()
.use(require('markdown-it-plugin-data-src'))
$3
`javascript
import MarkdownIt from 'markdown-it'
import dataSrc from 'markdown-it-plugin-data-src'
const md = new MarkdownIt()
.use(dataSrc)
`
Then simply install Lozad.js as you normally would and run it on all images.
$3
`html`
$3
`javascript
import lozad from 'lozad'
// Get all image tags and run Lozad lazy loading on them
const images = document.querySelectorAll('img')
const observer = lozad(images);
observer.observe();
``
License
MIT
Copyright 2018 Sean W. Lawrence - visit my portfolio