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 =
Add url(r'^assets/', include('django_lazy_image.urls', namespace='assets')),
to your base urls.py
urlpatterns =
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
; // Only run the below code if the page has a lazy image instanceconst lazyImage = documentif lazyImage // Collect all the lazy images on the page const lazyImages = document // Set up our IntersectionObserver callback const callback = { Array } const observer = callback threshold: 04 Array
file.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 = sliceimages