LiveSearch

Powered by vanilla & lovin' it!

advice url redirect after gif animation ends?

Bottom of Page

1 to 18 of 18

  1.  
    • CommentAuthorjargo
    • CommentTimeMar 5th 2007
     
    Anyone know how to? I've tried adding a meta tag that redirects after a set time but not a great solution.

    <meta http-equiv="refresh" content="12;URL=my_page_here.html">

    On a fast connection the user will wait too long and on a slow one the animation doesn't finish first.

    I don't want to use a swf. a) don't have flash and b) don't want to need a plug-in just for the splash page.

    Kind of urgent, client here tomorrow.

    Thanks.
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007
     
    ok i can think of only one solution other than flash.

    that is to attach an onLoad javascript event to the image which calls a function and that function sets a timeout and redirect going

    if you know the length of the animation then technically it should work. except to say that gif animations (despite what you migth have carefully crafted) rund at different speeds on different browsers. browsers also vary when they determine that the image is loaded and so might call the onLoad script when the first frme is loaded and not the final frame displayed.

    as its urgent ill have a inker and post some code if i can but really flash is the best way to do this
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007
     
    as the client is coming tomorrow - what browser would you like to run the preview in? maybe i could concentrate on getting something to work for that and work out the others later
    • CommentAuthorjargo
    • CommentTimeMar 5th 2007
     
    Probably going to show in safari.

    Other parts of the site use php so happy to have a php solution.

    I guess it needs to know when the last frame is loaded. Say it's 150 frames long then check frame 150 has displayed then whammo, off to the next page.

    Thanks ihc.
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007
     
    it wont work like that - there is no connection between the php and the image loading

    unless you just take potluck and reload after some seconds but it may show a pause at the end of the anim or cut the anim in half

    this is a client side script solution im certain - the php just delivers the code to the browser - from thereon its interaction with a gif is nil

    im working on something
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007 edited
     
    ok

    http://www.ihcra.com/giftest/tester.html

    works in firefox but its glitchy in safari for the speed of playback issue i mentioned

    also i think there is a caching issue

    what the script ont eh page is doing is checking if the image is fully loaded and then putting a timer on from then and redirecting after that time.

    difficulty being the means of checking if the image is loaded appears to pickup if its cached in memory

    ill keep working on it but it seems to be fine in ff for now - when is the client arriving?

    if you disable the cache of safari/firefox it works fine - if you can do that perhaps it will be ok for the client preview
    •  
      CommentAuthorCPU
    • CommentTimeMar 5th 2007
     
    you probably could create the anim with single pictures and a javascript
    and put the redirect at the end of the script.
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007 edited
     
    thats a good idea

    it depends how fluid/large the animation is but yes
    •  
      CommentAuthorCPU
    • CommentTimeMar 5th 2007
     
    into the head section:

    <script language="JavaScript">
    <!--
    if (document.images) { // Preloaded images
    demo1 = new Image();
    demo1.src = "demo1.jpg";
    demo2 = new Image();
    demo2.src = "demo2.jpg";
    demo3 = new Image();
    demo3.src = "demo3.jpg";
    }
    function timeimgs(numb) { // Reusable timer
    thetimer = setTimeout("imgturn('" +numb+ "')", 2000);
    }
    function imgturn(numb) { // Reusable image turner
    if (document.images) {
    if (numb == "4") { // Here comes the redirect
    window.location = "http://www.google.com/"
    }
    else { document["demo"].src = eval("demo" + numb + ".src");
    timeimgs(numb = ++numb);
    }
    }
    }
    // -->
    </script>

    into the body-tag:

    onload="timeimgs('2');"

    the image-tag:

    <img src="demo1.jpg" name="demo" width="100" height="100" alt="demo">

    tested in safari, should work in all browsers as long as js is activated of course.
    • CommentAuthorjargo
    • CommentTimeMar 5th 2007
     
    Thanks.

    It's 150 frames. Too many for javascript?

    I'll take a look ihc
    •  
      CommentAuthorCPU
    • CommentTimeMar 5th 2007
     
    150 frames? gawd hehe

    should prolly still work with javascript, but maybe you should add a small
    space invaders to entertain the visitors until its loaded :wink:
    • CommentAuthorpaperspace
    • CommentTimeMar 5th 2007 edited
     
    sweet
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007
     
    crankyboy:It's 150 frames. Too many for javascript?
    not too many no

    could be added in a loop

    for (i=1; i<=150; i++) {
    demo[i] = new Image();
    demo[i].setAttribute('src','demo' + i + '.jpg');
    }


    and a bit of a recode to pick up from the array rather than an eval command in there
    also i prefer it to be in the head and not in the body - not keen on onloads in tags
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007 edited
     
    ok still got problems with caching using cpu's method

    tester3

    i just need to add a preloader and it should pick up - unlike the first version this works much better if caching is enabled and its the second run through

    unfortunately i need to go to work so if someone else could pick up the baton

    still think flash is better mind ;)


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test Animated GIF is Loaded</title>

    <script type='text/javascript'>

    // *********************** CHANGE THE VALUES HERE TO CHANGE THE PERFORMANCE
    var imagePrefix = 'demo_'; // All frames to have this name prefix
    var imageFormat = 'gif'; // All frames to have this file format - any format is fine - the smaller the better though
    var frameCount = 60; // Total frames
    var swapDelay = 5; // Sets the speed of the animation - play with it til youre happy with the speed
    var loop = 3; // Optional looping - change this to the number of loops you would like
    // *********************** DON'T CHANGE ANYTHING BELOW THIS LINE

    var animImage = new Array;
    var animGif = null;
    var count = 1;
    var countCheck = 0;
    var loopCount =1;

    window.onload = windowInit;

    function windowInit() {
    animGif = document.getElementById('animGif'); // Points to image on page
    imageSwapTimer = window.setInterval('imageSwap()', swapDelay)
    }

    function imageSwap() {
    if (animGif) {
    if (count > frameCount && loop == loopCount) { // Finished the Animation and the looping
    window.clearInterval(imageSwapTimer);
    window.location.replace('http://www.ihcra.com/giftest/tester2.html'); // Do the redirect
    } else if (count > frameCount && loop !=loopCount) { // run another loop
    count = 1;
    loopCount++;
    } else { // load next frame
    if (countCheck != count) {

    // *********************** THIS WHERE SWAPS SHOULD BE MADE FOR PRELOADED IMAGES
    var newImage = new Image();
    newImage.src = imagePrefix + count + '.' + imageFormat;
    newImage.id = 'animGif';
    // *********************** END CODE EDIT HERE

    countCheck = count
    animGif.parentNode.replaceChild(newImage, animGif)
    animGif = document.getElementById('animGif'); // Repoints to image on page
    animGif.setAttribute('onload', 'count++');
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <img id='animGif' src="./demo_1.gif">
    </body>
    </html>
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007 edited
     
    i added an option at the top to loop if you wish - one of the variables that you can change


    oh and it only works in firefox so far
    •  
      CommentAuthorihc
    • CommentTimeMar 5th 2007
     
    any joy cb?
    • CommentAuthorjargo
    • CommentTimeMar 5th 2007
     
    Thanks ihc, your a darl.

    I'll give it a whirl now. Soon as I get some caffeine.

    Flash would be easier but not an option for me. No Flash.
    •  
      CommentAuthorihc
    • CommentTimeMar 6th 2007
     
    i was tending to a sick maxi last night so didnt have a chance to add the preloaders after work

    i might be able to my lunchtim - 1pm GMT

1 to 18 of 18

  1.