图像损坏或在Firefox中截断

Question

图像损坏或在Firefox中截断

下面的代码(以及这里:http://jsbin.com/oseruc/1)在每次单击鼠标时翻转给定的图像.它可以在我可以测试的所有浏览器中正常工作,除了最新的Firefox.Firefox显示错误,例如:

Image corrupt or truncated: http://upload.wikimedia.org/wikipedia/commons/0/0c/St._Cristopher-D%C3%BCrer.jpg
Image corrupt or truncated: http://upload.wikimedia.org/wikipedia/commons/0/0c/St._Cristopher-D%C3%BCrer.jpg
Image corrupt or truncated: Rhinoceros.jpg">http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer-_Rhinoceros.jpg
Image corrupt or truncated: http://upload.wikimedia.org/wikipedia/commons/0/0c/St._Cristopher-D%C3%BCrer.jpg
Image corrupt or truncated: Rhinoceros.jpg">http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer-_Rhinoceros.jpg

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript">
(function (window) {
    var frames = [
        "http://upload.wikimedia.org/wikipedia/commons/6/65/Duerer_%28Marter_der_zehntausend_Christen%29.jpg",
        "http://upload.wikimedia.org/wikipedia/commons/0/0c/St._Cristopher-D%C3%BCrer.jpg",
        "http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer_-_Rhinoceros.jpg"
    ];

    window.onload = function () {
        var frame_num = 0;
        var image = document.getElementById("image");

        image.onclick = function () {
            frame_num = (frame_num + 1) % frames.length;
            image.src = frames[frame_num];
            return false;
        };
    };
})(window);
    </script>
  </head>
  <body>
    <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Duerer_%28Marter_der_zehntausend_Christen%29.jpg" style="position:relative">
  </body>
</html>

Answer 1

Tim*_*ick 6

当您请求图像太快时,这肯定会发生.我通过使用setTimeout来查看是否在过去的35ms内请求了一个图像.我的应用程序有点不同,但您可以执行类似的操作(或者只是在图像加载之前禁用按钮).

Answer 2

Bar*_*mar 1

尝试这个：

window.onload = function () {
    var frame_num = 0;
    var image = document.getElementById("image");
    function load_next_image() {
        image.onclick = null;
        frame_num = (frame_num + 1) % frames.length;
        image.src = frames[frame_num];
        return false;
    };
    image.onclick = load_next_image;
    image.onload = function() {
        image.onclick = load_next_image;
    }
};

Run Code Online (Sandbox Code Playgroud)

每当您单击图像时，它都会暂时禁用单击处理程序，然后在图像加载完成后重新启用它。

归档时间：	13 年，5 月前
查看次数：	31251 次
最近记录：	9 年，6 月前