堆棧內存溢出
  簡體   English   中英

每 15 秒更改一次圖像時隨機預加載圖像

[英]random preload image when changing image every 15 seconds

 原文  2021-11-28 05:21:15  1   4    javascript/ html

問題描述

嗨，我是編碼新手，這是一個學校項目。 我正在嘗試每 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 添加圖像，但我希望在加載時顯示隨機圖像。 我一直在努力尋找解決方案，但我找不到任何解決方案。 誰能幫助我如何做到這一點？

4 個解決方案

解決方案1
 0 已采納  2021-11-28 05:35:44

您只需在創建圖像列表之后和 setInterval 之前添加這兩條指令。

let random = Math.floor(Math.random() * 5);
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() * 5);
    image.src = images[random];

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

解決方案2
 0  2021-11-28 05:41:39

您可以使用setTimeout而不是setInterval來稍微縮短代碼。 在 function 中首先顯示圖像，然后在延遲后再次使用setTimeout調用 function。

在這個工作示例中，由於我無權訪問您的圖像，因此我使用來自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>

解決方案3
 0  2021-11-28 05:46:13

如果你想從圖像 1 開始，在聲明 images 變量后放置這一行：

image.src = images[0];

如果你想從一個隨機圖像開始，每次重新加載都在聲明隨機變量后放置這一行：

image.src = images[random];

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

或者，您可以在 HTML 代碼中將圖像路徑添加到 IMG 標記的 src 屬性，不要擔心它會每 15 秒被覆蓋一次

解決方案4
 0  2021-11-28 06:13:10

您可以只命名您的 function，並在設置間隔之前調用它一次。 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 每5秒隨機生成一次背景圖片？ 預加載隨機背景圖像 每x秒更改圖像網址的一部分 如何通過CSS和JS每隔15秒左右更改我的背景圖像 預加載圖像 每 5 秒更改一次圖像和鏈接 每5秒無法下載圖片 每15秒更改背景圖片 Javascript每隔幾秒鍾更改一次Image，但會禁用其他一些代碼 嘗試為 html 創建一個 js 類（每隔幾秒更改一次背景圖像），需要幫助
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM