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

Question

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

我一直在看Medium

这是低分辨率

这是高分辨率

谢谢。

Answer 1

那它如何工作？

那么您需要2张图像。 1个具有超低画质和正常图像。

您在src上设置了低质量，然后延迟加载其他图像。

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

最初，您在图像上设置了filter: blur(5px)，并在完成加载高质量图像后取消了模糊设置。

https://github.com/verlok/vanilla-lazyload

是一个适合延迟加载的库

请注意此处：您需要限制网络速度。您可以通过按F12键，使用Google Chrome浏览器，转到Network和选择Slow 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" />

Answer 2

您可以按照dantheman93的建议使用一些JS解决方案，查看有关如何手动重新创建的this文章，也可以仅查看progressive JPGs，因为它可能是您正在寻找。