Loadr，一种在 HTML 中无缝加载大图像的高效解决方案-js教程-PHP中文网

Loadr，一种在 HTML 中无缝加载大图像的高效解决方案

PHPz

发布： 2024-09-03 11:39:02

原创

913 人浏览过

Loadr, an efficient solution for seamlessly loading large images in HTML

它是如何工作的：

它首先从 img src 加载低分辨率图像，然后在 hr-src atrbute 中加载高分辨率图像，一旦加载，就会用高分辨率图像替换低分辨率图像。

查看仓库，如果有星星就太棒了

演示

安装

CDN

使用 CDN 导入 Loadr。

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

登录后复制

？具体版本

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

登录后复制

用法

将 hr-src 添加到 HTML Loadr，一种在 HTML 中无缝加载大图像的高效解决方案中元素，这将是您的高分辨率图像。 src 属性中是图像的低分辨率版本。 Loadr 将在后台加载高分辨率图像，然后用其 URL 更新 src，替换低分辨率图像。

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

登录后复制

在 Javascript 中调用 Loadr。就这样了？.

index.html

<script>
  new Loadr();
</script>

登录后复制

查看 Codepen 上的演示。

额外的步骤

让我们为 Loadr，一种在 HTML 中无缝加载大图像的高效解决方案添加一些样式元素。

样式.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

登录后复制

定制化

Loadr 带有可以轻松自定义的变量。

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

登录后复制

查看 Codepen 上的自定义演示。

以上是Loadr，一种在 HTML 中无缝加载大图像的高效解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！