在重新加载页面之前显示图像答案

【问题标题】：Display image before reloading the page在重新加载页面之前显示图像
【发布时间】：2016-07-25 14:52:04
【问题描述】：

我正在尝试使用 jquery 创建一个井字游戏。

这是我的代码：

var i, j, m, k;
$(document).ready(function() {
  i = 0;
  m = new Array(3);
  for (var l = 0; l < 3; l++) {
    m[l] = new Array(3);
    for (k = 0; k < 3; k++)
      m[l][k] = null;
  }
});
$(".game").click(function() {

  var img;
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i % 2 == 0) {
    img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe"/>';
    m[row][col] = 'O';
  } else {
    img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeX.jpe"/>';
    m[row][col] = 'X';
  }
  $(this).prepend(img);
  $(this).off();
  i++;
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i <= 8) {
    if (winhor(row, col)) {
      alert(m[row][col] + " Won!");
      location.reload();
    }
    if (winver(row, col)) {
      alert(m[row][col] + " Won!");
      location.reload();
    }
    if (windiag(row, col)) {
      alert(m[row][col] + " Won!Diag");
      location.reload();
    }
  } else {
    alert("Draw");
    location.reload();
  }
});

function winhor(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[row][val]) {
      check = false;
      break;
    }
  }
  return check;
}

function winver(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[val][col]) {
      check = false;
      break;
    }
  }
  return check;
}

function windiag(row, col) {
  var sym = m[row][col];
  var valr, valc;
  var check = true;
  if ((row != col) && (row + col != 2)) {
    //alert("not 0 or 3 or 2");
    return false;
  } else if (row == col) {
    for (valr = 0, valc = 0; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc++;
    }
  }
  if (row + col == 2) {
    check = true;
    for (valr = 0, valc = 2; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc--;
    }
  }
  return check;
}

td {
  height: 100px;
  width: 50px;
  font-size=30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
</table>

当玩家获胜时，首先显示alert 消息，然后再将图像放入单元格中。我希望图像在显示 alert 消息之前出现。我该怎么做？

【问题讨论】：

@user3845646 重新加载同一页面

标签： javascript jquery tic-tac-toe

【解决方案1】：

您只需稍等片刻，然后显示alert() 框，例如，您可以使用setTimeout() by 100ms，查看以下示例：

setTimeout(function(){
  if (winhor(row, col)) {
    alert(m[row][col] + " Won!");
    location.reload();
  }
  if (winver(row, col)) {
    alert(m[row][col] + " Won!");
    location.reload();
  }
  if (windiag(row, col)) {
    alert(m[row][col] + " Won!Diag");
    location.reload();
  }
},100)

希望这会有所帮助。

var i, j, m, k;
$(document).ready(function() {
  i = 0;
  m = new Array(3);
  for (var l = 0; l < 3; l++) {
    m[l] = new Array(3);
    for (k = 0; k < 3; k++)
      m[l][k] = null;
  }
});
$(".game").click(function() {

  var img;
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i % 2 == 0) {
    img = '<img src="http://hhscp.org/programming/static/exemplars/tictactoe/X.png"/>';
    m[row][col] = 'O';
  } else {
    img = '<img src="http://www.dreamincode.net/forums/uploads/post-97990-1260678636.png"/>';
    m[row][col] = 'X';
  }
  $(this).prepend(img);
  $(this).off();
  i++;
  var col = $(this).index();
  var row = $(this).closest('tr').index();

  if (i <= 8) {
    setTimeout(function(){
      if (winhor(row, col)) {
        alert(m[row][col] + " Won!");
        location.reload();
      }
      if (winver(row, col)) {
        alert(m[row][col] + " Won!");
        location.reload();
      }
      if (windiag(row, col)) {
        alert(m[row][col] + " Won!Diag");
        location.reload();
      }
    },100);
  } else {
    alert("Draw");
    location.reload();
  }
});

function winhor(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[row][val]) {
      check = false;
      break;
    }
  }
  return check;
}

function winver(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[val][col]) {
      check = false;
      break;
    }
  }
  return check;
}

function windiag(row, col) {
  var sym = m[row][col];
  var valr, valc;
  var check = true;
  if ((row != col) && (row + col != 2)) {
    //alert("not 0 or 3 or 2");
    return false;
  } else if (row == col) {
    for (valr = 0, valc = 0; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc++;
    }
  }
  if (row + col == 2) {
    check = true;
    for (valr = 0, valc = 2; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc--;
    }
  }
  return check;
}

td {
  height: 50px;
  width: 50px;
  font-size=30px;
}

img{
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
</table>

【讨论】：

不，这不是问题。当单击一个单元格时，我想显示图像之前 alert 显示出来。
这正是我的 sn-p 中发生的事情以及为什么我添加了一段时间的死时间...请重新检查
是的，看到了。很抱歉浪费了您的时间。

【解决方案2】：

在显示警报消息之前，您必须让您的代码等待图像加载：

var img = document.createElement("img");
img.src = "file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe";
img.onload = function() { 
    checkIfYouWon();
}
$(this).prepend(img);

checkIfYouWon() 函数是您进行胜利测试的地方。代码如下：

$(".game").click(function() {

  var img = document.createElement("img");
  img.onload = function() { 
      checkIfYouWon();
  }
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i % 2 == 0) {
    img.src = "file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe";
    m[row][col] = 'O';
  } else {
    img.src = "file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeX.jpe";
    m[row][col] = 'X';
  }
  $(this).prepend(img);
  $(this).off();
  i++;
  function checkIfYouWon(){
      var col = $(this).index();
      var row = $(this).closest('tr').index();
      if (i <= 8) {
        if (winhor(row, col)) {
          alert(m[row][col] + " Won!");
          location.reload();
        }
        if (winver(row, col)) {
          alert(m[row][col] + " Won!");
          location.reload();
        }
        if (windiag(row, col)) {
          alert(m[row][col] + " Won!Diag");
          location.reload();
        }
      } else {
        alert("Draw");
        location.reload();
      }
  }
});

【讨论】：

我在 jquery 中需要它。
这在 jquery 中工作。我没有像您那样在字符串中声明图像，而是使用 DOM 来访问 onload 属性。其他一切都一样。
我用一个更完整的例子编辑了我的答案。也许它会帮助你理解我的意思。