Skip to content
Replaces 'src' attributes on images with 'data-src' for use with Lozad.js to lazy load all images by default.
JavaScript Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/markdown-it-plugin-data-src/0.0.0-development
lib
src
.eslintignore
.eslintrc.js
.flowconfig
.gitignore
.prettierrc.js
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
Makefile
README.md
babel.config.js
jest.config.js
jsdoc.config.json
package-lock.json
package.json

README.md

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.

npm Travis (.org) Coveralls github branch GitHub last commit GitHub issues npm bundle size (minified + gzip) GitHub PRs Welcome Commitizen friendly

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 a 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

Installation

npm install markdown-it-plugin-data-src

Usage

CommonJS plugin example

const md = require('markdown-it')()
  .use(require('markdown-it-plugin-data-src'))

ES6 Module plugin example

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.

Inline HTML Lozad example

<script src="https://cdn.jsdelivr.net/npm/lozad">
  // Lozad lazy image loading source
</script>
<script>
  // Get all image tags and run Lozad lazy loading on them
  var images = document.querySelectorAll('img')
  var observer = lozad(images);

  observer.observe();
</script>

ES6 Module Lozad example

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

You can’t perform that action at this time.