Skip to main content

An image utility that renders images lazily as well as intrinsically sizes them.

Project description

# 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`


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

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


yarn add django-lazy-image

Then include the Javascript / CSS as a module

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 && ! { = true
window.setTimeout(() => {
new LazyImage({ el: })
}, 150 * index)
const observer = new IntersectionObserver(callback, {
threshold: 0.4
Array.from(lazyImages).forEach(image => observer.observe(image))

@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 = []'.js-LazyImage'))
images.forEach(function (el) {
var image = window.lazyImage(el)

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-lazy-image, version 0.5.2
Filename, size File type Python version Upload date Hashes
Filename, size django_lazy_image-0.5.2-py3-none-any.whl (7.6 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size django-lazy-image-0.5.2.tar.gz (6.4 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page