主页 / 问题 / 908394
Accepted
Виталик Черный
Asked:2020-11-19 06:15:04 +0000 UTC2020-11-19 06:15:04 +0000 UTC

如何缓存图像并平滑更改背景？

  • 772

该块有background-image: url("../img/header__bg_3.jpg"). 您需要提前加载图像才能在不闪烁的情况下进行url更改js。实现这一点的最佳方法是什么，或者以另一种方式更好？

也有人想到，缓存后，需要检查缓存中是否存在这些图片，以免每次都加载。

PS：如有必要，我会举个例子。

PSS：除了缓存，我还需要平滑地改变一个元素的背景。

javascript

2 个回答

  1. Best Answer
    • rel="preload"最现代的方式：通过-进行高优先级预加载<link rel="preload" href="/test-img.jpg" as="image">。不幸的是，它并不适用于任何地方。对于不受支持的浏览器，您可以使用另一种方法，但已经是低优先级下载 - <link rel="prefetch" href="/test-img.jpg">.
    • 在 url 中，将图像编码为base64，而不是文件的路径 - 但文件大小将增长约 1.5 倍；
    • 在整个站点中使用单个精灵 - 需要更改图像background-position；
    • 在网站的某处上传图像，但将其隐藏visibility: hidden-​​ 如果您将其隐藏display: none，则该元素将从流中退出并且不会加载。
    • 3

  2. img = newImage(); img.src="图片路径";

    图像将被缓存

    • 0

相关问题