Question

116

image corrupt or truncated in firefox

rated 0 times [ 119] [ 3] / answers: 1 / hits: 32222 / 12 Years ago, mon, july 30, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

bryonk questions

1 What is the react query queryKey typescript type

Sat, Aug 13, 22, 00:00, 2 Years ago

1 Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Pagination in React/Typescript

Sun, May 9, 21, 00:00, 3 Years ago

1 Redirect to another page with TOKEN header through Server

Tue, Mar 16, 21, 00:00, 3 Years ago

1 What JavaScript engine does Apple's Safari browser use?

Tue, Sep 29, 20, 00:00, 4 Years ago

View All

answered 12 Years ago andrewb · Accepted Answer

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.