ajax gif load working

by nhulea

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<table>
    <tr>
        <td>
            <canvas id="tut0" width="125" height="125"></canvas>
            <br/>
            <label id="lab0"></label>
        </td>
        <td>
            <canvas id="tut1" width="125" height="125"></canvas>
            <br/>
            <label id="lab1"></label>
        </td>
        <td>
            <canvas id="tut2" width="125" height="125"></canvas>
            <br/>
            <label id="lab2"></label>
        </td>
        <td>
            <canvas id="tut3" width="125" height="125"></canvas>
            <br/>
            <label id="lab3"></label>
        </td>
    </tr>
    <tr>
        <td>
            <canvas id="tut4" width="125" height="125"></canvas>
            <br/>
            <label id="lab4"></label>
        </td>
        <td>
            <canvas id="tut5" width="125" height="125"></canvas>
            <br/>
            <label id="lab5"></label>
        </td>
        <td>
            <canvas id="tut6" width="125" height="125"></canvas>
            <br/>
            <label id="lab6"></label>
        </td>
        <td>
            <canvas id="tut7" width="125" height="125"></canvas>
            <br/>
            <label id="lab7"></label>
        </td>
    </tr>
    <tr>
        <td>
            <canvas id="tut8" width="125" height="125"></canvas>
            <br/>
            <label id="lab8"></label>
        </td>
        <td>
            <canvas id="tut9" width="125" height="125"></canvas>
            <br/>
            <label id="lab9"></label>
        </td>
        <td>
            <canvas id="tut10" width="125" height="125"></canvas>
            <br/>
            <label id="lab10"></label>
        </td>
        <td>
            <canvas id="tut11" width="125"...

CSS

body {
          margin: 20px;
          font-family: arial, verdana, helvetica;
          background: #d3f291;
      }
      h1 {
          font-size: 140%;
          font-weight:normal;
          color: #036;
          border-bottom: 1px solid #ccc;
      }
      canvas {
          border: 2px solid #000;
          margin-bottom: 5px;
      }
      td {
          padding: 7px;
      }
      pre {
          float:left;
          display:block;
          background: rgb(238, 238, 238);
          border: 1px dashed #666;
          padding: 15px 20px;
          margin: 0 0 10px 0;
      }

JavaScript

var r, path, raster, background, imagesrc;
    var preloadAmount = 10;
    var cache = [];
    var imgurcache = [];
    var rArray = [];
    var convertedArray = [];
    var ajaxlength = [];
    var autoShowNext = false;
    var loaded = false;
    var value = isNaN(value) ? 0 : value;
    var valueajax = isNaN(valueajax) ? 0 : valueajax;
    var press = isNaN(press) ? 0 : press;
    var cvs = document.getElementById("mycanvas");
    var canvas_options_form = document.getElementById("canvas-options");
    var canvas_filename = document.getElementById("canvas-filename");
    var pre = document.getElementById("preloader");
    var clearCanvas = false;

    var g = [];

    var animationFrame = new AnimationFrame(60);

    function extractToken(hash) {
        var match = hash.match(/access_token=(\w+)/);
        return !!match && match[1];
    }
    var num = Math.floor(Math.random() * 50);
    var token = extractToken(document.location.hash);
    var clientId = "b144351ffb05838";
    var auth;
    if (token) authorization = "Bearer " + token;
    else authorization = "Client-ID " + clientId;
    $.ajax({
        url: "https://api.imgur.com/3/gallery/random/random/page=" + num,
        method: "GET",
        headers: {
            Authorization: authorization,
            Accept: "application/json"
        },
        crossDomain: true,
        data: {
            image: localStorage.dataBase64,
            type: "base64"
        },
        beforeSend: function () {
            $("#preloader").css("display", "block");
        },
        success: handleData
    });

    function handleData(result) {
        $.each(result.data, function (idx, image) {
            if (result.data[idx].animated === true) if (result.data[idx].is_album === false) {
                ajaxlength.push({
                    imageamount: valueajax++
                });
                var rimgur = image.link;
                var newimage = gif(rimgur);
               ...