是否有更有效的方法来在滑块中加载和显示多个背景图像

Question

我目前在 JavaScript 中有一个 imageslider 函数，当用户单击媒体箭头时，它可以将一个图像切换为另一个图像。它工作正常，但第一次加载每个图像时会出现延迟。我的问题是...是否有一种更有效的方法来同时加载多个图像然后隐藏/使其可见，而不是一次加载每个图像（使用 div 背景图像）？这是我当前正在使用的 JavaScript 函数...

let imageNames = [];

function slideImage(offset = 0) {
  var pc = document.querySelector(".slider");
  var imageLocation = "/image/profile/";

  let maxCount = imageNames.length - 1;

  if (typeof index === "undefined") {
    index = 0;
  } else {
    index += offset;

    if (index > maxCount) {
      index = 0;
    } else if (index < 0) {
      index = maxCount;
    }
  }

  pc.style.backgroundImage = "URL('" + imageLocation + imageNames[index] + ".webp')";
}

Answer 1

这是一个使用 fetch() 异步加载所有图像的示例。

如果运行代码片段，您会发现在开始显示图像之前有短暂的延迟。但其余图像会在后台加载，因此在后续单击时，将有更多（如果不是全部）图像可供显示。

有关特定更改和（大部分）代码添加的详细信息，请参阅标有“编辑”的行。

// EDIT Added as it was being used in the original code
let index


let imageNames = [
  // EDIT image paths are now added here by preLoadImages( )
]

// EDIT added list of image urls to be preloaded by preLoadImages( )
let remoteImageNames = [
  "https://picsum.photos/1200/1300",
  "https://picsum.photos/1200/1310",
  "https://picsum.photos/1200/1320",
  "https://picsum.photos/1200/1330",
  "https://picsum.photos/1210/1300",
  "https://picsum.photos/1220/1310",
  "https://picsum.photos/1230/1320",
  "https://picsum.photos/1240/1330",
];


// EDIT added call to new function
preLoadImages( )


// EDIT added function
function preLoadImages( ) {
  for( let image of remoteImageNames ) {
    getImageDataURL( image, imgUrl => {
      imageNames.push( imgUrl )

      document.querySelector(".slider").innerText = "CLICK FOR NEXT IMAGE"
    } )
  }
}


function slideImage(offset = 0) {
  var pc = document.querySelector(".slider");
  // EDIT for demo
  // var imageLocation = "/image/profile/";
  var imageLocation = "";

  let maxCount = imageNames.length - 1;

  if (typeof index === "undefined") {
    index = 0;
  } else {
    index += offset;

    if (index > maxCount) {
      index = 0;
    } else if (index < 0) {
      index = maxCount;
    }
  }

  // EDIT for demo
  // pc.style.backgroundImage = "URL('" + imageLocation + imageNames[index] + ".webp')";
  pc.style.backgroundImage = "URL('" + imageLocation + imageNames[index] + "')";
}


// EDIT added function
//
// fetch()'s image specified in the url
function getImageDataURL( url, callback=null ) {
  fetch( url )
  .then( result => result.blob() )
  .then( blob => {
    let fileReader = new FileReader( );

    fileReader.onload = event => {  // loadend event happens successfull or not. load event happens only for success
      if( callback ) callback( fileReader.result );
    };
    fileReader.readAsDataURL( blob );  // Trigger file read
  } )
}

.slider {
  width:  400px;
  height: 400px;
  border: 1px solid gray;
  box-shadow: 2px 2px 4px black;
  border-radius: 10px;
  margin: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

        <div class="slider" onclick="slideImage(1)">
          PLEASE WAIT...
        </div>