Question

请注意，我对代码有非常基本的了解。

我已经将一个大的垂直gif（1000px x 8000px）拆分成8个1000px x 1000px的碎片 - 我需要无缝地堆叠它们，以便它们彼此同步播放 - 产生一个巨大的GIF动画。

从搜索我已经读过预加载GIF应该可以解决这个问题但我现在为我工作的东西现在不同步 - 我做了很多测试，改变了我的gif文件的大小和帧速率而没有成功。

感谢您提供任何帮助或建议，请参阅下面的“我正在使用的代码”。他们似乎都在预加载和显示图像，但它们仍然不同步。

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

这是脚本：

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();

我还尝试了一些贴在这里的代码：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);
};

最后我尝试了这里发布的内容：Is there a way of syncing gif files?

同步加载分割GIF - 同步播放多个GIF

0 个答案: