Django ImageField，在HTML呈现期间提供渐进式图像加载。
django-progressiveimagefield的Python项目详细描述
django的渐进图像模型字段
需要：
- Python3.6+
- 枕头4.0+
- Django 2.0+
问题：所以，你已经建立了一个网站（公文包、新闻、eshop 等等），您已经优化了静态文件（css、js、字体、图像），但是 尽管如此，由于渲染了很多图像，网页加载速度还是很慢 （不过，可能还有其他原因，但现在，让我们集中精力 图像渲染）。
解决方案：基于José Manuel Pérez关于How Medium does progressive image loading的文章， 我创建了一个django modelfield，我称之为 ProgressiveImageField。它所做的就是：当一个实例 progressiveimagefield被创建（保存，通常通过管理员 界面），它会自动创建一个非常小的模糊缩略图 （原始图像旁边的最大维数^ {tT2}$）。当这个 呈现大图像时，img元素的src属性 指向缩略图而不是大图像。所以，用户， 最初，看到模糊的缩略图。幕后，javascript 发生并逐渐下载原始图像。一旦 原始图像被下载，模糊的缩略图被替换为 漂亮的css淡入效果。就这些！
安装
使用pip安装：
pip install django-progressiveimagefield
将其添加到INSTALLED_APPS文件中settings：
INSTALLED_APPS += ['progressiveimagefield']
如何使用
在您的models.py中，只需：
fromdjango.dbimportmodelsfromprogressiveimagefield.fieldsimportProgressiveImageFieldclassMyModel(models.Model):# Other fields hereimg=ProgressiveImageField(upload_to="somewhere")
在base.html模板中：
{% load static %}
<!DOCTYPE html><html><head><!-- other meta tags here etc --><linkrel="stylesheet"media="all"href="{% static 'progressiveimagefield/css/pif.css' %}"></head><body>
{% block content %}{% endblock %}
<scriptsrc="{% static 'progressiveimagefield/js/pif.js' %}"></script></body></html>最后，在另一个html模板中，您希望在其中呈现图像 根据使用哪个模板引擎来渲染模板，您有两个选项：
使用DTL（Django模板语言）
{% load progressive_tags %} {% block content %} {% render_progressive_field instance.img %} {% endblock %}
Add the filter inside the file (i.e ^{tt11}$) where Jinja2 Environment is defined
fromjinja2importEnvironmentdefenvironment(**options):env=Environment(**options)env.filters.update({'progressive':'progressiveimagefield.jinja.progressive',})returnenvAdd the dotted path to the above function in your ^{tt7}$’s ^{tt13}$ setting ^{tt14}$ dict as the value to the ^{tt15}$ key. OK, here is the code:
TEMPLATES=[{'BACKEND':'django.template.backends.jinja2.Jinja2','DIRS':# setting for DIRS here,'APP_DIRS':True,'OPTIONS':{'environment':'path.to.jinja.environment.function',},},...]Use it in your HTML template like this (just like a regular Django filter):
{% block content %} {{ instance.img|progressive }} {% endblock %}
测试
要测试此应用程序，您应该
- 复制回购协议
- 创建virtualenv （mkvirtualenv -p $(which python3.6) progressiveimagefield）和 激活它（一旦创建，它将在默认情况下被激活）
- 安装需求 （pip install -r tests/test_requirements.txt）
- 运行python runtests.py
欢迎加入QQ群-->： 979659372
