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:

```cli
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](https://github.com/niwinz/django-jinja)

## Configuration

Add `django_lazy_image` to your `INSTALLED_APPS`

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

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

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

```cli
npm install django-lazy-image
```

or

```cli
yarn add django-lazy-image
```

Then include the Javascript / CSS as a module

**file.js**
```javascript
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**
```css
@import 'django-lazy-image/dist/css/lazy-image.css';
```

### Django Static
Somewhere in your `base.html` add:

```html
{{ 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

```javascript
var images = [].slice.call(document.querySelectorAll('.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.

Filename, size & hash SHA256 hash help File type Python version Upload date
django_lazy_image-0.5.2-py3-none-any.whl (7.6 kB) Copy SHA256 hash SHA256 Wheel py3
django-lazy-image-0.5.2.tar.gz (6.4 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page