使用Responsive图像库 using-responsive-image-library

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined

要将响应式图像库添加到网页并使用库管理现有图像，请完成以下步骤。

使用响应图像库

在Dynamic Media Classic中，创建图像预设，以防您计划将Responsive图像库与预设一起使用。

定义与响应图像库一起使用的图像预设时，请勿使用任何影响图像大小的设置，如wid=、hei=或scl=。请勿在图像预设中指定任何大小字段。相反，请将其保留为空白值。
将库JavaScript文件添加到您的网页。

在使用库API之前，请确保包含responsive_image.js。此JavaScript文件位于标准IS-Viewers部署的libs/子文件夹中：

<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);
           }
        });

recommendation-more-help

a26166cd-f2f4-45ce-996d-96a0f0d6cf49