0

目前我正在使用 TYPO3(目前版本 8.1.2)构建一个网站,其中包含很多非常大的图像。我正在使用扩展 TYPO3 引导程序包并根据我的需要对其进行了修改,包括当前看起来像这样的图像视图助手:

<picture>
    <source media="(min-width:1600px)" srcset="{f:uri.image(image: file)}">
    <source media="(min-width:1200px)" srcset="{f:uri.image(image: file, maxWidth: 1600)}, {f:uri.image(image: file, maxWidth: 3200)} 2x">
    <source media="(min-width:992px)" srcset="{f:uri.image(image: file, maxWidth: 1200)}, {f:uri.image(image: file, maxWidth: 2400)} 2x">
    <source media="(min-width:768px)" srcset="{f:uri.image(image: file, maxWidth: 992)}, {f:uri.image(image: file, maxWidth: 1984)} 2x">
    <img class="img-responsive" srcset="{f:uri.image(image: file, maxWidth: 768)}, {f:uri.image(image: file, maxWidth: 1536)} 2x">
</picture>

这种设置的问题在于,如果尚未创建不同的文件,例如,如果在添加新图像后第一次查看页面,TYPO3 需要进行大量的数字运算来生成所有不同版本的不同尺寸的图像,并且花费的时间太长(超过一分钟)。

所以,我正在寻找的是两种可能的解决方案之一:

  1. 一种告诉 TYPO3 尽可能晚地呈现特定图像的方法(即,当浏览器 ant 请求该特定文件时,而不是当页面由 TYPO3 呈现时)或

  2. 一种使用 ajax 仅请求实际需要的图像大小的方法,例如将我的 ViewHelper 修改为如下所示:
    <img data-uid="{file.propertiesOfFileReference.uid}">
    然后让一些 javascript 代码确定我实际需要的大小并以该大小请求图像(出于缓存目的,可能以 200 像素为步长)。这个js部分应该很容易做到,但我不知道如何实现typo3部分。有一些关于typo3和ajax的解释可以在不同的网站上找到,但我不知道它们有多新,为了实现我需要的东西,我必须调用一个视图助手来为我渲染图像,我不知道不知道该怎么做。

谁能指出我正确的方向或告诉我这两种解决方案中的一种是否可行?

4

1 回答 1

0

还有第三种解决方案,即创建一个调度程序作业,该作业将在页面重新加载之前“缓存”这些图像。您甚至可以使用 FAL 来跟踪图像是否被某种方式操纵并刷新缓存。选择要缓存的图像有不同的方法,但最简单的方法可能是强制编辑者简单地将他们将使用的所有图像放在一个特定的文件夹/文件装载中(当然还有子文件夹),而 cron 作业只会遍历它们并生成所有需要的尺寸。

于 2016-05-26T21:40:33.350 回答