Question

我跟着一个简单的tutorial from here。其中基本上有以下代码

<!doctype html>
<html>
<head>
    <base href="http://chessboardjs.com/" />
    <link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
    <div id="board" style="width: 400px"></div>
    <script src="/js/chess.js"></script>
    <script src="/js/jquery-1.10.1.min.js"></script>
    <script src="/js/chessboard.js"></script>
    <script>
        var init = function() {
            var board, game = new Chess();
            var makeRandomMove = function() {
                var possibleMoves = game.moves();
                if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
                var randomIndex = Math.floor(Math.random() * possibleMoves.length);
                game.move(possibleMoves[randomIndex]);
                board.position(game.fen());
                window.setTimeout(makeRandomMove, 500);
            };
            board = new ChessBoard('board', 'start');
            window.setTimeout(makeRandomMove, 500);
        };
        $(document).ready(init);
    </script>
</body>
</html>

一切正常，没有任何问题。但是当我删除<base href="...">并用此基本网址（http://chessboardjs.com/css/chessboard.css）替换所有链接时。我得到了相同的动画，但现在有一个可怕的眨眼效果。

此闪烁效果不会出现在 IE 11.0.1 ， Firefox 25.0.1 中，但会出现在 Chrome 31.0.1650.57 m < / p>

我不明白是什么原因（在我看来，什么都不应该改变）。

PS 一段时间之后，我认为原因是由于Chrome在使用jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead.时发出警告，但当我能够摆脱它时，问题仍然存在。所以我完全不解。

Answer 1

我是chessboard.js的创建者

这可能与Issue 52

有关

检查任何网络服务器正在为棋子的图像文件提供服务，为它们设置适当的过期标题;它应该在已经请求图像文件后返回HTTP 304 Not Modified。

可能发生的事情是网络服务器在每次更新电路板时重新提供图像文件并导致“闪烁”效果。

我可能会在未来的版本中改变它的功能，但是现在应该可以做到这一点。

动画闪烁没有基础href仅适用于谷歌浏览器

1 个答案: