Loading a Split GIF in Sync - playing multiple GIFs in sync

Question

Please note that I have an extremely basic understanding of code.

I have split a large vertical gif (1000px x 8000px) into 8 1000px x 1000px pieces - I need to seamlessly stack them so that they all play in sync with one another - resulting in one giant animated gif.

from searching I have read that preloading the gifs should do the trick but what I have working for me now plays out of sync - I have done many tests changing the size and frame rate of my gif files without success.

I appreciate any help or advice, see below for the code I'm working with. They all seem to be preloading and displaying the images, however they remain out of sync.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<script src="sync.js"></script>
</head>

<body>

<div id="canvas"></div>


</body>
</html>

and this is the script:

var img = new Image();
var imgCount = 0;
img.onload = loadCount;
img.src="pinkPlastic_SuperSculpture_aA.gif"

var img2 = new Image();
img2.onload = loadCount;
img2.src="pinkPlastic_SuperSculpture_aB.gif"

var img3 = new Image();
img3.onload = loadCount;
img3.src="pinkPlastic_SuperSculpture_aC.gif"

var img4 = new Image();
img4.onload = loadCount;
img4.src="pinkPlastic_SuperSculpture_aD.gif"

var img5 = new Image();
img5.onload = loadCount;
img5.src="pinkPlastic_SuperSculpture_aE.gif"

var img6 = new Image();
img6.onload = loadCount;
img6.src="pinkPlastic_SuperSculpture_aF.gif"

var img7 = new Image();
img7.onload = loadCount;
img7.src="pinkPlastic_SuperSculpture_aG.gif"

var img8 = new Image();
img8.onload = loadCount;
img8.src="pinkPlastic_SuperSculpture_aH.gif"


function loadCount() {
    imgCount++;
    if(imgCount==8) {
       var canvas = document.getElementById('canvas');
       console.log(img);
       canvas.appendChild(img);
       canvas.appendChild(img2);
       canvas.appendChild(img3);
       canvas.appendChild(img4);
       canvas.appendChild(img5);
       canvas.appendChild(img6);
       canvas.appendChild(img7);
       canvas.appendChild(img8);       
   }  
}

loadCount();

I also tried some code that was posted here: Load and display multiple animated gifs at the same time (synchronised) with Javascript

// This function will add an array of images to div#images
function showImages(images) {
    var container = document.getElementById("images"); // get the #images div
    for( var i = 0, l = images.length ; i < l ; i++ ) {
    var img = document.createElement('IMG'); // create the IMG tag
        img.src = images[i].src; // set the src - the image should be preloaded when     this happens
        container.appendChild(img); // add the IMG tag to the #images div
    }
}

// This one will create JS Image objects from an array of URLs
function loadImages(urls) {
    var remaining = urls.length; // the images still waiting to be fetched
    var images = []; // empty array to hold the created Image objects

// this function will be called for Image object that is loaded
var onloadHandler = function() {
    remaining--; // decrement the number of remaining images
    if( remaining < 1 ) {
        showImages(images); // if all images have loaded, add them to the page
        }
    };

    // create an Image object for each URL
    for( var i = 0, l = urls.length ; i < l ; i++ ) {
        var img = new Image();
        img.onload = onloadHandler; // set the onload-handler before setting the src
        img.src = urls[i];
        images.push(img); // add the Image object to the images array
    }
}

window.onload = function() {
   var urls = [
        "http://desmond.imageshack.us/Himg391/scaled.php?    server=391&filename=countdown.gif&res=medium",
        "http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
        "http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
       "http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
        "http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
    ];
    loadImages(urls);
};

and finally I've tried what was posted here: Is there a way of syncing gif files?

Loading a Split GIF in Sync - playing multiple GIFs in sync

0 Answers0