通过背景图片进行迭代

Question

我正在尝试制作动态背景，该背景每x秒更改一次图像。但是我希望图像从django项目中的目录中获取。我有这段代码，但是经过硬编码和限制。

var header = $('body');

var backgrounds = new Array(
    'url(static/media/backgrounds/1.jpg)'
  , 'url(static/media/backgrounds/2.jpg)'
  , 'url(static/media/backgrounds/3.jpg)'
  , 'url(static/media/backgrounds/4.jpg)'
  , 'url(static/media/backgrounds/5.jpg)'
  , 'url(static/media/backgrounds/6.jpg)'
  , 'url(static/media/backgrounds/7.jpg)'
  , 'url(static/media/backgrounds/8.jpg)'
  , 'url(static/media/backgrounds/9.jpg)'
  , 'url(static/media/backgrounds/10.jpg)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);

header.css('background-image', backgrounds[0]);

Answer 1

首先，您需要枚举所需的图像。对于简单的部署，静态文件将位于文件系统上（在STATIC_ROOT中，并从/static/下进行服务，类似

# Get absolute disk paths of files
backgrounds = glob.glob(os.path.join(settings.STATIC_ROOT, 'media', 'backgrounds', '*.jpg'))
# Turn into URLs
background_urls = [f'/static/media/backgrounds/{os.path.basename(bg)}' for bg in backgrounds]

会做；要获得更强大的解决方案，您可能希望使用staticfiles finders API枚举所有文件并将它们转换为URL。

为了将数据提供给您的视图，我可以想到几个选择。

列出视图中的背景并将数组传递到模板中

• 将所有背景图片的URL枚举到一个列表中，并将其传递给模板
• 将其呈现到JSON列表中：{{ background_urls|json_script:"backgrounds" }}

查看返回的Javascript片段

• 连接一个视图，该视图返回包含所有背景URL的JavaScript片段，例如var backgrounds = ["/static/foo.jpg"];
• 在您的视图中使用它：<script src="{% url "background_list_js" %}"></script>
• 您的脚本将原样工作

返回JSON有效负载的视图

• 连接一个视图，该视图返回具有所有背景URL的JSON对象，例如["/static/foo.jpg"]
• 使用例如fetch()或其他AJAX方法可在开始更改背景之前加载数据

视图返回随机背景URL

• 连接一个视图，该视图从选择中返回带有单个随机背景URL的JSON对象，例如{"url": "/static/foo.jpg"}
• 使用例如fetch()或其他AJAX方法来在您每次需要新背景时加载数据。

返回Javascript片段的自定义模板标记

• 就像选项1一样，除了注册一个simple template tag之外，您还可以使用它来内联背景数组：<script>{% dump_backgrounds %}</script>