动画闪烁没有基本的href只有谷歌铬

Animation blinks without base href only for google chrome

本文关键字：href 谷歌 闪烁 动画      更新时间：2023-11-28

我从这里开始学习了一个简单的教程。它基本上有以下代码

<!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="...">并用这个基本url（http://chessboardjs.com/css/chessboard.css）替换所有链接时。我得到了同样的动画，但现在有一个可怕的眨眼效果。

这种闪烁效果不会出现在IE 11.0.1、Firefox 25.0.1hrome 31.0.1650.57 m中

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

附言过了一段时间，我认为原因是Chrome在使用jQuery事件时发出警告。returnValue已被弃用。请改用标准事件.prventDefault（）。，但当我能够摆脱它时，问题仍然存在。所以我完全感到困惑。

我是棋盘.js 的创建者

这可能与问题52 有关

检查为棋子提供图像文件的任何Web服务器是否为其设置了适当的过期标头；它应该在已经请求了图像文件之后返回HTTP 304 Not Modified。

可能发生的情况是，网络服务器在每次板更新时都会重新提供图像文件，并导致"闪烁"效应。

我可能会在未来的版本中更改它的工作方式，但目前这可能已经足够了。

相关文章：