亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無需刷新整個頁面即可更新網頁中的圖像

無需刷新整個頁面即可更新網頁中的圖像

絕地無雙 2022-05-22 13:53:57
我是一名 JavaScript 初學者。我正在使用燒瓶將我的 python 代碼與前端(plainJS、HTML 和 CSS)集成?;旧?,我在左側有一個包含圖像(或者更確切地說是圖像的圖塊)的網頁,在右側有搜索結果。當用戶選擇圖像中的特定圖塊時,它會被發送到后端進行處理,將結果(外觀相似的圖塊)保存到文件夾中。這些將在網頁的右側自動檢索。這樣做的問題是:當我運行燒瓶應用程序時,頁面首先被加載,并且由于開頭的結果文件夾包含上一個會話的圖像,所以它們被加載了。此外,在 python 處理完成后,我必須手動刷新頁面才能加載結果。我試過:編寫一個 setInterval 函數,每隔 5 秒更新一次圖像的來源,這樣當新結果到達時,它們可以自動顯示。代碼寫在下面。顯然這個函數根本不起作用(我輸入了 console.log() 語句,但它們沒有顯示任何內容):JAVASCRIPT--------->setInterval(function(){    var images=document.getElementsByTagName('img');    for(var i=0;i<images.length;i++){      var dt=new Date();      console.log(dt); //does not display anything on the console      var img=images[i];      if(img.id!='MainIMAGE')    // reload all images except image with id MainIMAGE        {           img.src=img.src+"?"+dt.getTime();           console.log(img.src);  // does not display anything as well        }   }},5000);這是正確的解決方案嗎?或者還有其他方法可以解決這個問題嗎?
查看完整描述

2 回答

?
翻過高山走不出你

TA貢獻1875條經驗 獲得超3個贊

您可以使用URL來避免連接先前的time參數:


setInterval(function() {

  var images = document.getElementsByTagName('img');

  for (var i = 0; i < images.length; i++) {

    var dt = new Date();

    console.log(dt); //does not display anything on the console

    var img = images[i];

    if (img.id != 'MainIMAGE') // reload all images except image with id MainIMAGE

    {

      const url = new URL(img.src);

      url.search = 'time=' + dt.getTime();

      img.src = url.href;

      console.log(img.src + ' ' + dt); // does not display anything as well

    }

  }

}, 1000);

<img src="https://placeimg.com/200/200/any" />


查看完整回答
反對 回復 2022-05-22
?
開心每一天1111

TA貢獻1836條經驗 獲得超13個贊

我建議使用searchParams,而不是搜索


const images = [...document.querySelectorAll('img:not(#MainIMAGE)')]; // assuming no dynamic images inserted

setInterval(() => {

  images.forEach(img => {

    const url = new URL(img.src);

    url.searchParams.set('time', new Date().getTime());

    img.src = url.href;

  })

}, 2000);

<img src="https://placeimg.com/100/100/any" /><br/>


<img id="MainIMAGE" src="https://placeimg.com/200/200/any" />


查看完整回答
反對 回復 2022-05-22
  • 2 回答
  • 0 關注
  • 83 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號