Skip to content

Replaces 'src' attributes on images with 'data-src' for use with Lozad.js to lazy load all images by default.

License

Notifications You must be signed in to change notification settings

seanWLawrence/markdown-it-plugin-data-src

Repository files navigation

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

About

Replaces 'src' attributes on images with 'data-src' for use with Lozad.js to lazy load all images by default.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published