Home/ Questions/Q 8678151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:38:26+00:00

my code below (as well as here: http://jsbin.com/oseruc/1 ) flips through the given images

  • 0

my code below (as well as here: http://jsbin.com/oseruc/1) flips through the given images on each mouse click. It works fine in all browsers that I could test it on, except for the latest Firefox. Firefox displays errors such as:

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


This happens if I click too fast. And yes, have seen this bug report: http://code.google.com/p/fbug/issues/detail?id=4291

Any ideas why this is happening and how to fix that? Because I cannot just ignore these errors. They interfere with my functionality.

My code:

<!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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this: 

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

    Whenever you click on an image it temporarily disables the click handler, then re-enables it when the image is finished loading.

    • 0