目前我正在使用 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 需要进行大量的数字运算来生成所有不同版本的不同尺寸的图像,并且花费的时间太长(超过一分钟)。
所以,我正在寻找的是两种可能的解决方案之一:
一种告诉 TYPO3 尽可能晚地呈现特定图像的方法(即,当浏览器 ant 请求该特定文件时,而不是当页面由 TYPO3 呈现时)或
一种使用 ajax 仅请求实际需要的图像大小的方法,例如将我的 ViewHelper 修改为如下所示:
<img data-uid="{file.propertiesOfFileReference.uid}">
然后让一些 javascript 代码确定我实际需要的大小并以该大小请求图像(出于缓存目的,可能以 200 像素为步长)。这个js部分应该很容易做到,但我不知道如何实现typo3部分。有一些关于typo3和ajax的解释可以在不同的网站上找到,但我不知道它们有多新,为了实现我需要的东西,我必须调用一个视图助手来为我渲染图像,我不知道不知道该怎么做。
谁能指出我正确的方向或告诉我这两种解决方案中的一种是否可行?