동시에 여러 애니메이션 GIF로드 및 표시 (동기화 된) 자바와

Question

나는 어떤 종류의 코더 또는 프로그래머도 아니지만로드하고 일부 gif를 표시하려고 노력했습니다. 동시에 시작됩니다. 즉, 나는 그것들을 동기화시켜야한다.

Google 검색을 많이 해왔고 Chrome/Safari 및 Firefox에서 작동하는 것처럼 보였지만 Internet Explorer는 협력을 거부합니다. 일부 추가 CSS와

var images = ["thephoto1", "thephoto2", "thephoto3", "thephoto4", "thephoto5"]; 

function initImages() { 
    for (var i = 0; i < images.length; i++) { 
     imageId = images[i]; 
     image = document.getElementById(imageId); 
     image.style.visibility = "visible"; 
    } 
} 

function preloadImages(urls) { 
    var img = new Array(); 
    for (var i = 0; i < urls.length; i++) { 
     img[img.length] = new Image(); 
     img[img.length - 1].src = urls[i]; 
    } 
} 

window.onload = function() { 
    var img = new Array(
     "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" 
    ); 
    preloadImages(img); 
    initImages(); 
} 

:

내 현재 코드는 이것이다

이

.preload 
    { 
     visibility: hidden; 
    } 

그것은 기본적으로 this 및 this script 결합이다.

현재 라이브 예를 볼 수 있습니다 해당 링크에 주석을 읽는 그러나

• Restart an animated GIF from JavaScript without reloading the image.
• Javascript to only display animated gif when loaded.

: http://jsfiddle.net/AN9uB/

몇 가지 가능한 방법 또는 잠재적으로 도움이 게시물을 , 나는 그들이 가능하다는 것을 완전히 확신하지 못한다.

내가 사용하고있는 테스트 gif는 내가 발견 한 무작위 이미지와 작은 미리 경고이며 크기와 기간에 따라 다양한 gif를 테스트해야하므로 이미지가 상당히 큽니다. 모든 gif는 한 번만 재생되는 첫 번째 카운트 다운 이미지를 제외하고 반복됩니다.

Firefox 3.6.18을 사용하여 페이지를 볼 때 첫 번째 카운트 다운 이미지가 전혀 재생되지 않지만 일부 gif는 모두 동시에로드되어 표시됩니다.

주요 문제는 Internet Explorer에서이 작업을 수행하는 방법을 생각할 수 없다는 것입니다. 아마도 이미지를 미리로드하고 자바 스크립트를 통해 페이지를 새로 고치는 것으로 생각했습니다. 그것은 추한 해결책이지만, 나는 그것이 효과가있을 것이라고 생각합니다.

플래시는 이런 종류의 일을하는 명백한 도구이지만, 내가 제작하는 친구는 gif 만 사용합니다.

모든 주요 브라우저에서 작동하는보다 세련된 솔루션이 있습니까? 또한 JQuery가 아닌 Javascript 만 사용하는 것이 이상적입니다.

도움 주셔서 감사합니다.

Answer 1

글쎄, 당신은 단지 HTML의 실제 IMG 태그 후 즉, 읽은,로드 페이지 후 preloadImages 기능 를 호출하고 있기 때문에 당신은 정말, 이미지를 사전로드하지 않는, 브라우저 아마 시작이야 그들을 다운로드. 마지막 부분은 visibility:hidden 스타일에 따라 달라질 수 있지만 확실하지 않습니다. 적어도 모든 브라우저가이 경우 수행 할 작업에 동의하지는 않습니다.

또한 자바 스크립트와 HTML에서 모두 정의 된 URL이 있습니다. 나중에 다시 변경하는 것은 번거롭고 어렵습니다.

나는 이것이 바로 모든 곳에서 작동하는지 나는 전혀 모른다 인정합니다,하지만 당신은 자바 스크립트에서 이미지 URL을 가진

1. 을 시도 할 수 있습니다 - 그들은 '때 다음, HTML에 다음 을 추가 할 수 있습니다 다시 준비 됨

2. 이벤트 핸들러 JS Image 개체를 사용하여 이미지가로드되었다고 주장합니다. 모두로드되면 문서 (즉, 페이지)에 추가하십시오.

이제 특정 브라우저가 gif에서 애니메이션 시계를 시작하는시기를 알 수 없습니다. GIF가로드 된 순간부터 시작됩니다. GIF가 동시에로드되지 않으므로 수행 할 수있는 일이 많지 않습니다. 그러나 문서에 배치되었을 때 애니메이션이 시작되면 (가능성이 있지만 브라우저는 신뢰하지 않는 경우), 기회가 있습니다.

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

는 여기에 모두의 jsfiddle입니다 : http://jsfiddle.net/Frqys/2/

을 다시, 이것은 실제로 모든 브라우저에서 작동 있을지는 모르겠어요. 사파리, 크롬, 파이어 폭스 (모두 Mac OS)는 괜찮은 것처럼 보이지만 확실치 않습니다. 여러 번 gif 파일을 복사하고 각 파일의 이름을 다르게 지정하면 고유 한 URL이 표시됩니다. 캐싱을 방지하고 애니메이션 시계를 별도로 유지해야합니다. 그런 다음 다른 GIF를로드하지 말고 동기화 여부를 확인하십시오.