内联图像预览具有锋利，蓝色和lambda功能

网站和Web应用程序加载通常会遭受内容反映：图像在周围内容后加载，从而导致布局震动。这种令人沮丧的用户体验可以得到缓解。虽然React的悬念提供了解决方案，但它通过延迟所有内容直到图像满载来牺牲性能。更好的方法？立即显示模糊的图像预览，加载后无缝地被高分辨率图像替换。

渐进的jpegs似乎是答案，提供模糊的初始渲染，然后进行逐步完善。但是，即使是渐进式JPEG也需要等待初始数据，从而导致相同的初始内容回流。

本文探讨了两种替代方法：创建自定义模糊预览并利用Blurhash。

使用的库：

• JIMP（版本0.16.1）
• Blurhash（版本1.1.5）
• 夏普（版本0.30.3）

方法1：生成自定义预览

我们可以将基本64编码的低质量图像预览直接嵌入base64编码的base64编码，而不是依靠图像URL。虽然编码的base64通常会导致大型文件尺寸，但小型模糊预览仍然易于管理。该预览会立即显示，一旦加载，就被高分辨率图像所取代。

以下resizeImage函数（简化为简洁）使用JIMP创建模糊预览：

函数resizeImage（src，maxWidth，质量）{
  返回新的承诺（res => {
    jimp.Read（src，async函数（err，image）{
      if（image.bitmap.width> maxWidth）{
        image.resize（maxWidth，jimp.auto）;
      }
      image.quality（质量）;

      const PreviewImage = image.clone（）;
      previewimage.quality（25）.blur（8）;
      const Preview =等待PreviewImage.getBase64Async（previewimage.getMime（））;

      res（{状态：“成功”，image，preview}）;
    }）;
  }）;
}

此预览虽然不是很小，但比原始图像要小得多。相应的反应代码（简化）句柄显示预览并使用完整分辨率图像交换：

 // ... React组件代码...

方法2：使用Blurhash改进（和更好的替代方案）

虽然最初建议，但Blurhash在通过Base83编码生成极小的预览时，需要客户端JavaScript和<canvas></canvas>标签，使其不太理想服务器端渲染（SSR）框架，例如Next.js和Sveltekit。

优越的选择是plaiceholder 。它利用尖锐的，需要类似的lambda安装注意事项，如稍后所述，但生成了Tiny Base64预览。通过跟踪图像的尺寸并应用模糊过滤器，它可以实现与Blurhash相当的结果，同时完全适合SSR友好。预览可以使用CSS在真实图像下显示，提供无缝过渡。

原始Blurhash实施（不推荐）：

尖锐的库可以生成Blurhash预览。对于AWS Lambda部署，请使用此安装命令：

 “ install-deps”：“ npm i && sharp_ignore_global_libvips = 1 npm i -ark = x64  -  platform = linux sharp”

以下功能生成Blurhash预览：

从“ Blurhash”中导入{encode，isblurhashvalid};
const sharp = require（“夏普”）;

导出异步函数getblurhashpreview（src）{
  // ...（尖锐的处理和Blurhash编码）...
}

然后， PreviewCanvas组件使用帆布API解码并呈现Blurhash预览。

结论：

在图像加载过程中防止内容回流可增强用户体验。生成自定义模糊预览或使用plaiceholder在性能和视觉平滑度之间提供平衡，为简单地延迟内容渲染的替代方案提供了一个较高的替代方案，直到加载了所有图像。选择最适合您项目需求和框架的方法。

以上是内联图像预览具有锋利，蓝色和lambda功能的详细内容。更多信息请关注PHP中文网其他相关文章！