时间戳

首页 > 解决方案 > 如何将图像从低分辨率加载到高分辨率？

javascript - 如何将图像从低分辨率加载到高分辨率？

问题描述

我想知道这怎么可能！使用 Web 客户端语言（CSS、JS）从低分辨率到高分辨率加载和图像。

我一直在看中

这是低分辨率

低分辨率

这是高分辨率 高分辨率

谢谢。

标签： javascripthtmlcss

解决方案

那么它是怎样工作的？

那么你需要2张图片。1 具有超低质量和正常图像。

您设置了低质量src并延迟加载其他图像。

这就是它背后的所有魔力。

最初你filter: blur(5px)在图像上设置，当它完成加载高质量图像时，你取消设置模糊。

一个很好的延迟加载库是https://github.com/verlok/vanilla-lazyload

请注意：您需要限制网络速度。您可以通过按 F12 使用 google chrome 执行此操作，转到Networkans selectSlow 3G然后启动代码片段

图像被缓存，因此它从缓存中加载。在运行代码段以查看转换之前，您需要清除缓存。

var lazyLoadInstance = new LazyLoad({
  callback_loaded: (el) => {
     el.style.setProperty("filter", "none")
  }
});
img {
   filter: blur(5px);
   transition: filter 200ms;
}
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script>

<img class="lazy" src="https://blogxon.com/5f1492591d873e4284aacdce/thumbnails/placeholder/1597094737252.jpeg" data-src="https://blogxon.com/5f1492591d873e4284aacdce/thumbnails/1597094737252.jpeg" />

推荐阅读