django-lazy-image

0.5.2 • Public • Published

Django Lazy Image

django-lazy-image is a small Django utility that allows you to render images lazily on the frontend to minimise initial page load.

Installation

To install django-lazy-image just run:

pip install django-lazy-image

Requirements

  • Jinja2
  • Django >= 1.11 (It's only been tested on 1.11 but i'm pretty sure it will work on 1.8+)
  • Django Jinja

Configuration

Add django_lazy_image to your INSTALLED_APPS

INSTALLED_APPS = [ 
    ...
    'django_lazy_image', 
    ...
]

Add url(r'^assets/', include('django_lazy_image.urls', namespace='assets')), to your base urls.py

urlpatterns = [ 
    ...
    url(r'^assets/'include('django_lazy_image.urls'namespace='assets')), 
    ...

Then there are 2 ways to use the static files with Django:

NPM (The preferred way)

You can simply do

npm install django-lazy-image

or

yarn add django-lazy-image

Then include the Javascript / CSS as a module

file.js

import LazyImage from 'django-lazy-image';
 
// Only run the below code if the page has a lazy image instance
const lazyImage = document.querySelector('.js-LazyImage')
if (lazyImage) {
  // Collect all the lazy images on the page
  const lazyImages = document.querySelectorAll('.js-LazyImage')
  // Set up our IntersectionObserver callback
  const callback = (entries, observer) => {
    Array.from(entries).forEach((entry, index) => {
      // If any of the images have come in to view, activate them sequentially
      if (entry.isIntersecting && !entry.target.dataset.activating) {
        entry.target.dataset.activating = true
        window.setTimeout(() => {
          new LazyImage({ el: entry.target })
          observer.unobserve(entry.target)
        }, 150 * index)
      }
    })
  }
  const observer = new IntersectionObserver(callback, {
    threshold: 0.4
  })
  Array.from(lazyImages).forEach(image => observer.observe(image))
}

file.css

@import 'django-lazy-image/dist/css/lazy-image.css';

Django Static

Somewhere in your base.html add:

{{ static('django_lazy_image/css/lazy-image.css') }}
{{ static('django_lazy_image/js/lazy-image.js') }}

You can then use the lazyImage function that is on the global object

var images = [].slice.call(document.querySelectorAll('.js-LazyImage'))
images.forEach(function (el) {
  var image = window.lazyImage(el)
  ...
})

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.5.2
    0
    • latest

Version History

Package Sidebar

Install

npm i django-lazy-image

Weekly Downloads

0

Version

0.5.2

License

MIT

Unpacked Size

6.1 kB

Total Files

5

Last publish

Collaborators

  • dangamble