每15秒更改影像時隨機預加載影像-有解無憂

嗨，我是編碼新手，這是一個學校專案。我試圖每 15 秒更改一次影像，并且我已經想出了如何做到這一點。但是，我希望立即顯示影像，而不是在 15 秒后顯示。我的代碼如下：

<!DOCTYPE html>
<html>
<body>

<div class="center">
    
<img src="" id="image">

</div>

    
<script type="text/javascript">
    let image = document.getElementById('image');
    let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png']
    setInterval(function(){
        let random = Math.floor(Math.random() * 100);
        image.src = images[random];
    }, 15000);
    </script>
    </body>
</html>

我知道我可以在 img src 中添加影像，但我希望在加載時顯示隨機影像。我一直在努力尋找解決方案，但找不到任何解決方案。任何人都可以幫助我如何做到這一點？

uj5u.com熱心網友回復：

您只需要在創建影像串列之后和 setInterval 之前添加這兩個指令。

let random = Math.floor(Math.random() * 100);
image.src = images[random];

這是您將獲得的代碼：

<!DOCTYPE html>
<html>
<body>

<div class="center">
    
<img src="" id="image">

</div>

    
<script type="text/javascript">
    let image = document.getElementById('image');
    let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png']
    let random = Math.floor(Math.random() * 100);
    image.src = images[random];

    setInterval(function(){
        let random = Math.floor(Math.random() * 100);
        image.src = images[random];
    }, 15000);
    </script>
    </body>
</html>

uj5u.com熱心網友回復：

在設定 Interval 之前，您可以只命名您的函式并呼叫它一次。

顯示代碼片段

let image = document.getElementById('image');

let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png']

randomImage();
setInterval(randomImage, 15000);

function randomImage(){
  let random = Math.floor(Math.random() * images.length);
  image.src = images[random];
}

<!DOCTYPE html>
<html>

<body>
  <div class="center">
    <img src="" id="image">
  </div>
</body>
</html>

這是一個帶有不同影像的作業片段

let images = []

for(var i = 0; i<= 100; i  ){
  images.push("https://picsum.photos/300/200?random=" i);
}

let image = document.getElementById('image');


randomImage();
setInterval(randomImage, 2000);  //I have reduced the interval duration

function randomImage(){
  let random = Math.floor(Math.random() * images.length);
  image.src = images[random];
}

<!DOCTYPE html>
<html>

<body>
  <div class="center">
    <img src="" id="image">
  </div>
</body>
</html>

uj5u.com熱心網友回復：

您可以使用setTimeout代替來稍微縮短代碼setInterval。在該函式中，您首先顯示影像，然后setTimeout在延遲后再次使用該函式呼叫該函式。

在這個作業示例中，由于我無法訪問您的影像，我將使用來自dummyimage.com的影像填充影像陣列，并將超時延遲設定為一秒，以便您可以快速查看結果。

const image = document.getElementById('image');
const images = [];

// Return a random hex color
function rndColor() {
  return Math.floor(Math.random()*16777215).toString(16);
}

// Get two hex colours and use them
// to form a new dummy image, and then
// push that image to the images array
for (let i = 0; i < 100; i  ) {
  const hex1 = rndColor();
  const hex2 = rndColor();
  images.push(`https://dummyimage.com/100x100/${hex1}/${hex2}`);
}

// The main carousel function
// Add an image to the image src, and then
// call the carousel function after a delay
function carousel() {
  const random = Math.floor(Math.random() * 100);
  image.src = images[random];
  setTimeout(carousel, 1000);
}

carousel();

<div class="center">
  <img src="" id="image">
</div>

uj5u.com熱心網友回復：

如果您想從影像 1 開始，請在宣告影像變數后放置此行：

image.src = images[0];

如果你想從一個隨機影像開始，每次重新加載在宣告隨機變數后放置這一行：

image.src = images[random];

您這樣做是為了為影像變數啟動一個值，因為默認情況下它將等于未定義，因此您的代碼的問題在于它最初加載了一個空的影像容器

或者，您可以在 HTML 代碼中將影像路徑添加到 IMG 標簽的 src 屬性，不用擔心它會每 15 秒被覆寫為目標

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/368318.html

標籤：javascript html

上一篇："catch(console.error)"是捕獲Promise拒絕的有效方法嗎？

下一篇：計算多維陣列中的總價