使用Responsive图像库 using-responsive-image-library
要将响应式图像库添加到网页并使用库管理现有图像，请完成以下步骤。
使用响应图像库
-
在Dynamic Media Classic中， 创建图像预设 以防您计划将Responsive Image库与预设一起使用。
定义与响应式图像库一起使用的图像预设时，请勿使用任何影响图像大小的设置，例如
wid=，hei=，或scl=. 请勿在图像预设中指定任何大小字段。 相反，请将其保留为空白值。 -
将库JavaScript文件添加到您的网页。
在使用库API之前，请确保包含
responsive_image.js. 此JavaScript文件位于libs/标准IS-Viewers部署的子文件夹：<s7viewers_root>/libs/responsive_image.js -
设置现有图像。
库会从其正在处理的图像实例中读取某些配置属性。 在之前定义属性
s7responsiveImage此类图像将调用API函数。还建议您将现有图像URL放入
data-src属性。 然后，设置现有src属性，将1x1GIF图像编码为数据URI。 这样，可以减少网页在加载时发送的HTTP请求数。 但请注意，如果需要使用SEO（搜索引擎优化），最好设置title属性。以下示例用于定义
data-breakpoints属性，并使用编码为数据URI的1x1GIF：code language-none <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940"> -
调用
s7responsiveImage库管理的每个图像实例的API函数。调用
s7responsiveImage库管理的每个图像实例的API函数。 进行此类调用后，库会根据的运行时大小，使用从图像服务下载的图像替换原始图像IMG元素和设备屏幕的密度。以下代码是调用的示例
s7responsiveImage图像上的API函数，假定responsiveImage是该图像的ID：code language-none <script type="text/javascript"> s7responsiveImage(document.getElementById("responsiveImage")); </script>
示例 example-0509a0dd2a8e4fd58b5d39a0df47bd87
库支持同时处理网页上的多个图像实例。 因此，请对您希望库管理的每个图像重复上述步骤1和2。
网页负责设计图像元素的样式，使其尺寸灵活。 Responsive图像库本身不区分固定大小图像和“流畅”图像。 如果应用于固定大小的图像，则仅加载新图像一次。
以下代码是一个普通网页的完整示例，该网页具有由Responsive Image库管理的单个流体图像。 该示例包含额外的CSS样式，以使图像对Web浏览器窗口大小具有“响应性”：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 50%;
}
.fluidimage {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img id="responsiveImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="200,400,600,800" class="fluidimage">
</div>
<script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/libs/responsive_image.js"></script>
<script type="text/javascript">
s7responsiveImage(document.getElementById("responsiveImage"));
</script>
</body>
</html>
使用智能裁切
AEM 6.4和Dynamic Media Viewer 5.9中有两种智能裁切模式可用：
- 手动 — 用户定义的断点和相应的图像服务命令在图像元素的属性中定义。
- 智能裁剪 — 自动从投放服务器检索计算智能裁剪演绎版。 使用图像元素的运行时大小选择最佳演绎版。
要使用智能裁剪模式，请设置 data-mode 属性至 smart crop. 例如：
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset"
data-mode="smartcrop">
关联的图像元素调度 s7responsiveViewer 运行时断点更改时的事件。
responsiveImage.addEventListener("s7responsiveViewer", function (event) {
var s7event = event.s7responsiveViewerEvent;
if(s7event.type == "breakpointchanged") {
console.log("New width: " + s7event.width);
console.log("Old width: " + s7event.oldWidth);
}
});