僅在顯示gif後提示提示

這就是我的代碼應該如何工作的方法，如果點擊「按鈕」，我將轉到display（）顯示完整的gif，並且僅在顯示gif之後，會出現提示。我該怎麼做呢？僅在顯示gif後提示提示

我現在的代碼與我想要實現的相反，也就是說，它先提示然後顯示gif。

//button 
<input id="button" type="button" value="next" onClick="display()"/> 

//javascript 
<div id="display_panel"> 
    <script type="text/javascript"> 
     function display(){ 
      if(gameStatArray[7][1][1]==1){ 
       var div = document.getElementById('display_panel'); 

       div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif"/></div>'; 

       if (confirm("what do you want to continue?")) { 
        alert("yes"); 
       } else { 
        alert("no"); 
       } 
      } 
     } 
    </script> 
</div>

在此先感謝誰回答。

來源

2015-07-19 Michrane

onload屬性添加到img標籤：

//javascript 
    <div id="display_panel"> 
     <script type="text/javascript"> 
      function display(){ 
       if(gameStatArray[7][1][1]==1){ 
        var div = document.getElementById('display_panel'); 

        div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif" onload="showConfirm()"/></div>'; 
       } 
      } 

function showConfirm() { 
    if (confirm("what do you want to continue?")) { 
     alert("yes"); 
    } else { 
     alert("no"); 
    } 
} 
</script>

來源

2015-07-19 06:44:09 monkey

所以我認爲所有這一切都在這裏發生的事情是，當你注入到文檔以下標記：

<img src="drawable/clip1.gif" />

瀏覽器正在向服務器發出請求以獲取圖像。這可能只需要幾毫秒，但是在那段時間內，腳本已經繼續執行，並且執行了該位。

最簡單的解決方案是從頭開始在文檔中加載<img>標記，但最初使用CSS來隱藏它。你所有的JavaScript需要做的就是顯示圖像，也許通過添加一個類。

document.getElementById('clip1').className = 'show-me';

現在的HTML看起來像：

<img id="clip1" class="show-me" src="drawable/clip1.gif" />

的瀏覽器將已經獲取的圖像時，<img>標籤文檔中首次呈現。所以沒有等待。

來源

2015-07-19 06:44:46 kieranpotts

試試這個：

function display(){ 
    if(gameStatArray[7][1][1]==1){ 
     var div = document.getElementById('display_panel'); 

     // create the image 
     var image = new Image(); 

     // action that happens after the image was loaded 
     image.onload = function() { 
      if (confirm("what do you want to continue?")) { 
       alert("yes"); 
      } else { 
       alert("no"); 
      } 
     }; 

     // wrap image in image_display div 
     var imageDisplay = document.createElement("div"); 
     imageDisplay.id = "image_display"; 
     imageDisplay.appendChild(image); 

     // append image_display to display_panel 
     div.appendChild(imageDisplay); 

     // now set the src of the image 
     image.src = "drawable/clip1.gif"; 
    } 
}

或者追加到DOM之前只是預載：

function display(){ 
    if(gameStatArray[7][1][1]==1){ 
     var image = new Image(); 
     image.onload = function() { 
      var div = document.getElementById('display_panel'); 

      div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif"/></div>'; 

      if (confirm("what do you want to continue?")) { 
       alert("yes"); 
      } else { 
       alert("no"); 
      } 
     }; 
     image.src = "drawable/clip1.gif"; 
    } 
}

來源

2015-07-19 06:45:33

我試過這個，它和我以前的代碼做了同樣的事情。點擊按鈕後立即顯示提示，點擊提示後，gif開始顯示。我認爲這是因爲，圖像已經加載到窗口中，所以出現提示，但是，我需要的是在10秒gif完成顯示後出現提示。有沒有辦法做到這一點？謝謝。：d – Michrane

-1

HTML

<input id="button" type="button" value="next" onClick="displayGif()"/>

JAVASCRIPT

<script type="text/javascript"> 

function displaySurvey(){ 
    if(gameStatArray[7][1][1]==1){ 
     var div = document.getElementById('display_panel'); 
     div.innerHTML = div.innerHTML + '<div id="image_display"><img src="drawable/clip1.gif"/></div>'; 
    return true; 
    } 

} 


function showConfirm(){ 

    if(confirm("what do you want to continue?")){  
     alert("ok"); 
    } 
    else { 
     alert("KO");  
    } 
} 

function displayGif(){ 

    if(displaySurvey()){ 

     setTimeout(function() {showConfirm();}, 500); 


    }; 

} 

</script>

來源

2015-07-19 07:10:02

僅在顯示gif後提示提示

回答

相關問題