Вызов предупреждения только после отображения gif

Question

Вот как мой код должен работать, если я нажму кнопку «,», я перейду к отображению(), где будет показан полный 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> 

Заранее благодарим всех, кто ответит.

Answer 1

Добавить 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> 

Answer 2

Так что я думаю, что все, что происходит здесь в том, что, когда Вы вводите в документ следующую разметку:

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

Браузер отключает запрос на сервер для получения изображения. Это может занять всего несколько миллисекунд, но в то время ваш скрипт продолжался, а бит alert() исполнялся.

Простейшим решением было бы иметь разметку <img>, загруженную в документ с самого начала, но с помощью CSS, чтобы скрыть ее изначально. Весь ваш JavaScript должен показать изображение, возможно, добавив класс.

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

Теперь HTML выглядит следующим образом:

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

браузер был бы уже принес образ, когда <img> тег первым оказывается в документе. Так что не ждал.

Answer 3

Попробуйте это:

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"; 
    } 
} 

Answer 4

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>