javascript 试图在特定图像加载后隐藏gif

下面是3个不同的文件。第一块是我的flask后端。第二个文件是我目前正在处理的HTML文件。第三个文件是javascript
我一直试图隐藏gif时，触发图像加载，但它似乎不想工作。

document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.getElementById('functionality');
      para.textContent = 'No Functionality Yet! Nice try though!';
  
    }

  
    function openDataWindow() { 
      window.location.href = '../BathymetryML'
    }
  
    function openFileWindow() { 
      window.location.href = '../../dragAndDrop'
    }
  
    function openTestWindow() { 
      window.location.href = '../../testPage'
      }
  
    function openOutputWindow() { 
        window.location.href = '../../outputPage'
      }

    function runPython(){
      
      const {PythonShell} = require('python-shell');
  
      let pyshell = new PythonShell('script.py');
  
      pyshell.on('message', function(message) {
          console.log(message);
      })
  
      pyshell.end(function (err) {
          if (err){
              throw err;
          };
          console.log('finished');
      });
    }

    function hideGif() {
      const gifDiv = document.getElementById('my-gif');
      const triggerImg = document.getElementById('trigger-image');
      triggerImg.onload = () => {
        gifDiv.style.display = 'none';
      };
    }

  
    const buttonOne = document.querySelector('#dataclean');
    buttonOne.addEventListener('click', openDataWindow);

    const buttonTwo = document.querySelector('#modelTrain');
    buttonTwo.addEventListener('click', openFileWindow);
  
    const buttonThree = document.querySelector('#testData');
    buttonThree.addEventListener('click', openTestWindow);
  
    const buttonFour = document.querySelector('#outputProfile');
    buttonFour.addEventListener('click', openOutputWindow);

    const buttonFive = document.querySelector('#runTheTest');
    buttonFive.addEventListener('click', runPython);

    

    hideGif();

   
  });

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Machine Learning For Bathymetry</title>
    <link href="../../static/styles.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    
  </head>
  <body>

    <div class = "container">

      <div class = "button-div">
      <button type="button" id="modelTrain">Train Model</button>
      <button type="button" id="dataclean">Data Cleaning</button>
      <button type="button" id="testData">Test Model</button>
      <button type="button" id="outputProfile">Create Bathymetry</button>
      </div>

      <div class = "div-1">
        <h1> Picture Perfect Ocean Floor Mapping: </h1>
        <h1>A Machine Learning Bathymetry Study</h1>
        
        <p>Welcome to our machine learning project!</p>
        <form method="POST", onsubmit="disableButton()">
          <button name="PythonGo", id="cleanButton"> <p>Clean Data!</p></button>
        </form>
      

        <div id="my-gif">
          <img src="https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp" alt="My GIF">
        </div>
        
      

        {% if parseComplete %}
          <br>
          
          <img id="trigger-image" img src="../../static/my_plot.png" class = plotPicture alt="Trigger Image" onload="hideGif()">
        {% endif %}

      </div>
    </div>
   

  </body>
  <script src="../../static/script2.js" defer>  </script>
</html>

document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.getElementById('functionality');
      para.textContent = 'No Functionality Yet! Nice try though!';
  
    }

  
    function openDataWindow() { 
      window.location.href = '../BathymetryML'
    }
  
    function openFileWindow() { 
      window.location.href = '../../dragAndDrop'
    }
  
    function openTestWindow() { 
      window.location.href = '../../testPage'
      }
  
    function openOutputWindow() { 
        window.location.href = '../../outputPage'
      }

    function runPython(){
      
      const {PythonShell} = require('python-shell');
  
      let pyshell = new PythonShell('script.py');
  
      pyshell.on('message', function(message) {
          console.log(message);
      })
  
      pyshell.end(function (err) {
          if (err){
              throw err;
          };
          console.log('finished');
      });
    }

    function hideGif() {
      const gifDiv = document.getElementById('my-gif');
      const triggerImg = document.getElementById('trigger-image');
      triggerImg.onload = () => {
        gifDiv.style.display = 'none';
      };
    }

  
    const buttonOne = document.querySelector('#dataclean');
    buttonOne.addEventListener('click', openDataWindow);

    const buttonTwo = document.querySelector('#modelTrain');
    buttonTwo.addEventListener('click', openFileWindow);
  
    const buttonThree = document.querySelector('#testData');
    buttonThree.addEventListener('click', openTestWindow);
  
    const buttonFour = document.querySelector('#outputProfile');
    buttonFour.addEventListener('click', openOutputWindow);

    const buttonFive = document.querySelector('#runTheTest');
    buttonFive.addEventListener('click', runPython);

    

    hideGif();

   
  });

我尝试了很多不同的组合，但我似乎不能得到gif隐藏后triggerimage加载

一旦HTMLimg元素加载到“onload”事件侦听器中，hideGif函数就会运行。

<img id="trigger-image" img src="../../static/my_plot.png" class = plotPicture alt="Trigger Image" onload="hideGif()">

一旦图像加载，您就可以等待它再次加载。

triggerImg.onload = () => {
    gifDiv.style.display = 'none';
  };

但是，它不会再次加载，因为它已经加载过了，这意味着该函数中的代码永远不会运行。
试着重构你的hideGif函数，看看是否有效：

function hideGif() {
      const gifDiv = document.getElementById('my-gif');
      gifDiv.style.display = 'none';
    }

该过程将是：
1.在某个时间点加载触发图像
1.一旦加载，它将运行hideGif（）
1.在hideGif（）中，查询DOM以获得GIF
1.隐藏GIF
希望这能有所帮助！

javascript 试图在特定图像加载后隐藏gif

1条答案

相关问题

热门标签

最新问答