时间戳

首页 > 解决方案 > 如何消除图像轮播上的延迟？

javascript - 如何消除图像轮播上的延迟？

问题描述

我正在尝试消除我一直在处理的个人网站上图像轮播的滞后。我能够使旋转木马正常工作，但是图像真的很滞后，直到我一路穿过相册的旋转木马（你可以看到我在这里）。我设置了代码，以便图像文件位置位于数组中，并且背景图像的 src 基于从数组中添加新文本更改为新位置。你对我如何消除滞后有什么建议吗？我用 fetch api 尝试了一些东西，但我只用它来获取和解析 json 数据，所以我对如何使它在本地文件上工作有点困惑，但我认为我需要以某种方式使其异步。非常感谢您可以分享的任何帮助或资源！

按钮循环如下：

let album = 2;
let currSlide = 0;
divContainer.style.backgroundImage = picArray[album][currSlide];

right.addEventListener('click', () => {
    if(currSlide == picArray[album].length - 1){
        currSlide = 0;
        divContainer.style.backgroundImage = picArray[album][currSlide];
    }
    else {
        currSlide = currSlide + 1;
        divContainer.style.backgroundImage = picArray[album][currSlide];
    }
});

数组看起来像这样：

let picArray = [
[   "url('Pictures/Amsterdam/1.jpg')",
    "url('Pictures/Amsterdam/2.jpg')",
    "url('Pictures/Amsterdam/3.jpg')",
    "url('Pictures/Amsterdam/4.jpg')",
    "url('Pictures/Amsterdam/5.jpg')",
    "url('Pictures/Amsterdam/6.jpg')",
    "url('Pictures/Amsterdam/7.jpg')",
    "url('Pictures/Amsterdam/8.jpg')",
    "url('Pictures/Amsterdam/9.jpg')"
],
[   "url('Pictures/OregonCoast/1.jpg')",
    "url('Pictures/OregonCoast/2.jpg')",
    "url('Pictures/OregonCoast/3.jpg')",
    "url('Pictures/OregonCoast/4.jpg')"
]

标签： javascriptarrays

解决方案

您的图像太长，因此需要一些时间来加载。

  1. 一种改进方法。在轮播开始之前加载图像。用于show hide切换。
  2. 使用网络预缓存图像。
  3. 使用小图像在缩略图中显示。

请参阅下面的示例。

let album = 2;
let currSlide = 0;
const divContainer = document.getElementById("images");

const right = document.getElementById("rightB");

let picArray = [
  "https://nickcosmo.com/Pictures/RoseGarden/1.jpg",
  "https://nickcosmo.com/Pictures/RoseGarden/2.jpg",
  "https://nickcosmo.com/Pictures/RoseGarden/3.jpg",
  "https://nickcosmo.com/Pictures/RoseGarden/4.jpg",
];
divContainer.innerHTML = picArray.map((src) => `<img src="${src}" />`).join("");
const images = divContainer.querySelectorAll("img");
let index = 0;
images[index].classList.add("active");
right.addEventListener("click", () => {
  images.forEach((img) => img.classList.remove("active"));
  images[index++].classList.add("active");
});
#images img {
        display: none;
      }
      #images .active {
        display: block !important;
      }
<div class="carousel">
    <button class="moveB" id="leftB">‹&lt;/button>
    <button class="moveB" id="rightB">›&lt;/button>
    <div id="images">
      
    </div>
  </div>

推荐阅读