Question

我使用vanilla JavaScript创建了一个带按钮的图片幻灯片。当我使用按钮一段时间并加载所有图像时，图像加载速度很快。但是当我重新加载页面并尝试使用按钮加载图像时，它们首先加载速度非常慢。有没有什么办法解决这一问题？

这是HTML和JS

HTML

{'key1': [3, 1], 'key2': [0, 4], 'key3': [57492, 204652], 'key4': [1,3]}

Vanilla JavaScript

<div id="container">
  <img src="img/img1.jpeg" id="slides">
  <button class="btn" id="previous">&#10094;</button>
  <button class="btn" id="next">&#10095;</button>
  <script src="script.js"></script>
</div>

我在这个网站上的第一个问题，对不起，如果我说错了。

Answer 1

通过更改图像本身的大小或文件类型，将图像优化为更小的尺寸。这将减少加载所需的时间。

此外，您可以使用Javascript预先加载图像。如果有很多图像，那么您可以在幻灯片中加载相邻图像。

Answer 2

您的图像可能比您需要的分辨率太高。如果您在普通计算机（或移动设备）上运行此设备，则图像大小约为250像素。通过jpeg压缩和降低图像分辨率来优化图像。

了解更多here ..

Answer 3

我建议您尝试Piio使用此库，您无需更改存储空间，它会根据<img />容器大小自动调整图像大小，并且会返回正确的格式取决于浏览器的功能，因此，如果您使用的是Chrome，它将返回WebP格式的图像。这些图像也通过CDN提供。

对于脚本，您不必在src属性中设置图片的网址，而是需要将src设为空并在data-piio属性中设置网址

如果您想了解更多有关它以及它如何与响应式图像一起使用，请阅读本文： https://blog.piio.co/2018/04/09/how-to-use-optimized-responsive-images/

Vanilla JavaScript img SlideShow w / Btn，加载img slow

3 个答案: