处理图像精灵的 Django 应用模型,以加快具有多个小图像的页面加载。
项目描述
django-sprites 是一个 Django 应用程序,具有两个捆绑模型,用于处理
Sprite 及其关联的 SpriteItem。
------------
* Sprite 是一个组合图像,由一个或多个
SpriteItems 组成,每个 SpriteItems 都是旨在用作
HTML 元素的图像背景的图像。
* 将这些背景图像组合成一个图像可以
极大地节省加载时间。
从同一个服务器顺序请求多张图片有很多时间损失,
只能同时请求2-4张。因此,如果您有 20 或30 个,则可能会为您的 整体页面加载
增加数百或数千毫秒。
* 每个 SpriteItem 都包含与您的网站设计实际相关的信息
,例如图像本身、尺寸(计算出来的)、
HTML 属性(如 class 和 id),
模型方法使用这些属性来生成样式、完整的 CSS 行和/或 HTML
标记源,其后面带有相关图像和任何输入 HTML
。
要求:
-----------
* PIL,支持 libjpeg
* Django(显然)
* Uuid
* urllib2
设置:
-----------
* pip install django-sprites
* 添加到你的 settings.py INSTALLED_APPS:
'sprites',
* 也在 settings.py 中:
MEDIA_ROOT = 'path/to/your/actual/intended/media/root'
这将与下一个
配置项中的相对路径一起用于确定图像的保存位置。
MEDIA_URL = 'http://myserver.mydomain.com/media' 除了下面的相对路径之外
,Django 使用它来生成 ImageFiles 的 URL 。
完全限定路径
实际上不是必需的,但最好在
此处设置完全限定路径,以便您可以在任何域上使用 HTML,而
不仅仅是与您的 Django 应用程序相同。
* 同样在 settings.py 中(可选):
SPRITE_PATH = '<some relative path to store sprites>'
SPRITE_ITEM_PATH = '<another relative path>'
这些默认分别为 'sprites' 和 'sprite_items'。
用法:
-----------
* 通过调用将图像批量加载到精灵中:
sprite=Sprite.create_from_urls(['http://path.to/first.jpg',
'http://path .to/second.jpg'...])
# 或者...
sprite=Sprite.create_from_local_files(['/path/to/first/file',
'/path/to/second/file'])
for spriteitem in sprite.spriteitem_set.all():
# 每个精灵至少应该有一个(唯一的)css_id,
* SpriteItem 属性
- spriteitem.style - 输出 CSS 样式指令,无需
使用选择器指定它,
即:“display:block; background: url(whatever); etc.;”
- spriteitem.css - 输出相同的样式指令,
选择器基于 spriteitem.css_id
即:“#myimage {display:block; etc.;}”
- spriteitem.tag_with_style - 输出安全标记(准备
在模板)具有嵌入样式属性的 HTML 跨度标记,
包括 spriteitem.internal_html 给出的任何内部 HTML
- spriteitem.thumbnail - 如果创建,这是一个 OneToOne
链接到另一个 SpriteItem,按照惯例(但不是
要求)是 spriteitem 的缩略图。
- spriteitem.make_thumbnail(width=64,height=64) - 返回
spriteitem.image 大小宽度、高度的 PIL.Image 副本。
纵横比被保留,因此大小可能不完全匹配。
这由 sprite.create_thumbnails(width,height) 使用,
它生成新
的精灵,将这些精灵与精灵的缩略图关联起来,并
返回新创建的精灵。
- spriteitem.sprite.build() 应该在制作后调用
更改为精灵。这个应用程序内部的方法可以很好地处理
这个问题,但是如果您进行更改,您必须确定
何时以及多久重新构建您的 sprite。我建议
先构建一组精灵,这样你就不用
* 中间件
添加'sprites.middleware.SpriteReplaceByClass'到MIDDLEWARE_CLASSES 可以 用样式DIV
替换IMG 元素。
IMG 的 SRC 将成为
DIV 的(精灵)背景。从 IMG 到 DIV的 DOM 转换并不完美
,所以要小心。默认,
具有 css 类“sprite_img”的 IMG 将被替换。
可以使用 settings.py 中的 SPRITE_REPLACE_CSS_CLASS 更改该类。
注意:中间件依赖 BeautifulSoup。因为人们
不会简单地将正则表达式转换为 HTML。
* 注意:除了中间件,这并不是真的要单独
使用。理想情况下,您将拥有某种
将 ForeignKey 与 SpriteItem 相关的模型,例如:
class SiteElement(models.Model):
spriteitem=models.ForeignKey(SpriteItem)
link=models.CharField(max_length=255,null=True ,blank=True)
def get_tag(self):
如果 self.link 不是 None:
return '<a href="%s">%s</a>'%(
self.link,self.spriteitem.tag_with_style)
return self.spriteitem.tag_with_style
* 应该支持 django-storages 后端扩展。
至少测试过使用 S3BotoStorage。 * 根据组件 SpriteItem 图像
的 PIL 检测格式检测和设置图像文件类型。
最终,它使用
附加到 Sprite 的最后一个 SpriteItem 来设置格式。
ToDo:
-----------
* 让它按图像格式分割,也许。将 JPEG 混合到一个被
检测为 GIF 的精灵中看起来很糟糕。
* 编写测试
* 完成 ToDo 列表
Sprite 及其关联的 SpriteItem。
------------
* Sprite 是一个组合图像,由一个或多个
SpriteItems 组成,每个 SpriteItems 都是旨在用作
HTML 元素的图像背景的图像。
* 将这些背景图像组合成一个图像可以
极大地节省加载时间。
从同一个服务器顺序请求多张图片有很多时间损失,
只能同时请求2-4张。因此,如果您有 20 或30 个,则可能会为您的 整体页面加载
增加数百或数千毫秒。
* 每个 SpriteItem 都包含与您的网站设计实际相关的信息
,例如图像本身、尺寸(计算出来的)、
HTML 属性(如 class 和 id),
模型方法使用这些属性来生成样式、完整的 CSS 行和/或 HTML
标记源,其后面带有相关图像和任何输入 HTML
。
要求:
-----------
* PIL,支持 libjpeg
* Django(显然)
* Uuid
* urllib2
设置:
-----------
* pip install django-sprites
* 添加到你的 settings.py INSTALLED_APPS:
'sprites',
* 也在 settings.py 中:
MEDIA_ROOT = 'path/to/your/actual/intended/media/root'
这将与下一个
配置项中的相对路径一起用于确定图像的保存位置。
MEDIA_URL = 'http://myserver.mydomain.com/media' 除了下面的相对路径之外
,Django 使用它来生成 ImageFiles 的 URL 。
完全限定路径
实际上不是必需的,但最好在
此处设置完全限定路径,以便您可以在任何域上使用 HTML,而
不仅仅是与您的 Django 应用程序相同。
* 同样在 settings.py 中(可选):
SPRITE_PATH = '<some relative path to store sprites>'
SPRITE_ITEM_PATH = '<another relative path>'
这些默认分别为 'sprites' 和 'sprite_items'。
用法:
-----------
* 通过调用将图像批量加载到精灵中:
sprite=Sprite.create_from_urls(['http://path.to/first.jpg',
'http://path .to/second.jpg'...])
# 或者...
sprite=Sprite.create_from_local_files(['/path/to/first/file',
'/path/to/second/file'])
for spriteitem in sprite.spriteitem_set.all():
# 每个精灵至少应该有一个(唯一的)css_id,
* SpriteItem 属性
- spriteitem.style - 输出 CSS 样式指令,无需
使用选择器指定它,
即:“display:block; background: url(whatever); etc.;”
- spriteitem.css - 输出相同的样式指令,
选择器基于 spriteitem.css_id
即:“#myimage {display:block; etc.;}”
- spriteitem.tag_with_style - 输出安全标记(准备
在模板)具有嵌入样式属性的 HTML 跨度标记,
包括 spriteitem.internal_html 给出的任何内部 HTML
- spriteitem.thumbnail - 如果创建,这是一个 OneToOne
链接到另一个 SpriteItem,按照惯例(但不是
要求)是 spriteitem 的缩略图。
- spriteitem.make_thumbnail(width=64,height=64) - 返回
spriteitem.image 大小宽度、高度的 PIL.Image 副本。
纵横比被保留,因此大小可能不完全匹配。
这由 sprite.create_thumbnails(width,height) 使用,
它生成新
的精灵,将这些精灵与精灵的缩略图关联起来,并
返回新创建的精灵。
- spriteitem.sprite.build() 应该在制作后调用
更改为精灵。这个应用程序内部的方法可以很好地处理
这个问题,但是如果您进行更改,您必须确定
何时以及多久重新构建您的 sprite。我建议
先构建一组精灵,这样你就不用
* 中间件
添加'sprites.middleware.SpriteReplaceByClass'到MIDDLEWARE_CLASSES 可以 用样式DIV
替换IMG 元素。
IMG 的 SRC 将成为
DIV 的(精灵)背景。从 IMG 到 DIV的 DOM 转换并不完美
,所以要小心。默认,
具有 css 类“sprite_img”的 IMG 将被替换。
可以使用 settings.py 中的 SPRITE_REPLACE_CSS_CLASS 更改该类。
注意:中间件依赖 BeautifulSoup。因为人们
不会简单地将正则表达式转换为 HTML。
* 注意:除了中间件,这并不是真的要单独
使用。理想情况下,您将拥有某种
将 ForeignKey 与 SpriteItem 相关的模型,例如:
class SiteElement(models.Model):
spriteitem=models.ForeignKey(SpriteItem)
link=models.CharField(max_length=255,null=True ,blank=True)
def get_tag(self):
如果 self.link 不是 None:
return '<a href="%s">%s</a>'%(
self.link,self.spriteitem.tag_with_style)
return self.spriteitem.tag_with_style
* 应该支持 django-storages 后端扩展。
至少测试过使用 S3BotoStorage。 * 根据组件 SpriteItem 图像
的 PIL 检测格式检测和设置图像文件类型。
最终,它使用
附加到 Sprite 的最后一个 SpriteItem 来设置格式。
ToDo:
-----------
* 让它按图像格式分割,也许。将 JPEG 混合到一个被
检测为 GIF 的精灵中看起来很糟糕。
* 编写测试
* 完成 ToDo 列表