Restart a Gif Animation Without Reloading the File

Restart a gif animation without reloading the file

I've had similar requirement.

var img = document.createElement("img"),
    imageUrl = "http://i73.photobucket.com/albums/i231/charma13/love240.gif";
img.src = imageUrl;
document.body.appendChild(img);

window.restartAnim = function () {
    img.src = "";
    img.src = imageUrl;
}

Restart an animated GIF from JavaScript without reloading the image

You should preload your images into code.

var image = new Image();
image.src = "path";

when you want to use:

nextimg_img.attr('src', image.src);

Then when you swap the src out just swap from the preloaded image objects. That should do the trick to avoid redownloading.

Proper way to reset a GIF animation with display:none on Chrome

Chrome deals with style changes differently than other browsers.

In Chrome, when you call .show() with no argument, the element is not actually shown immediately right where you call it. Instead, Chrome queues the application of the new style for execution after evaluating the current chunk of JavaScript; whereas other browsers would apply the new style change immediately. .attr(), however, does not get queued. So you are effectively trying to set the src when the element is still not visible according to Chrome, and Chrome won't do anything about it when the original src and new src are the same.

Instead, what you need to do is to make sure jQuery sets the src after display:block is applied. You can make use of setTimeout to achieve this effect:

var src = 'http://i.imgur.com/JfkmXjG.gif';
$(document).ready(function(){
    var $img = $('img');
    $('#target').toggle(
        function(){
            var timeout = 0; // no delay
            $img.show();
            setTimeout(function() {
                $img.attr('src', src);
            }, timeout);
        },
        function(){
            $img.hide();
        }
    );
});

This ensures that src is set after display:block has been applied to the element.

The reason this works is because setTimeout queues the function for execution later (however long later is), so the function is no longer considered to be part of the current "chunk" of JavaScript, and it provides a gap for Chrome to render and apply the display:block first, thus making the element visible before its src attribute is set.

Demo: http://jsfiddle.net/F8Q44/19/

Thanks to shoky in #jquery of freenode IRC for providing a simpler answer.

---

Alternatively, you can force a redraw to flush the batched style changes. This can be done, for example, by accessing the element's offsetHeight property:

$('img').show().each(function() {
    this.offsetHeight;
}).prop('src', 'image src');

Demo: http://jsfiddle.net/F8Q44/266/

Restart gif without reloading it in IE11

It might be more appropriate to convert GIF file to a video and use <video> HTML tag. See Replace Animated GIFs with Video article by Jeremy Wagner. But if you want to stick to GIF you can utilize XMLHttpRequest, Blob and object URL given CORS and cache related HTTP headers are appropriately configured:

function activate_gif(){    var url = "https://i.imgur.com/Rsc0qOw.gif";    var img = document.getElementById( "img1" );
    var xhr = new XMLHttpRequest();    // Browser will take cached response if it has cache entry with url key.    xhr.open( "GET", url );    xhr.responseType = "blob";    xhr.onload = function() {        if ( xhr.status != 200 ) {            // Complain.            return;        }        var blobUrl = URL.createObjectURL( xhr.response );        img.src = blobUrl;        setTimeout( function () {            // Let browser display blob and revoke blob after stack unwind.            URL.revokeObjectURL( blobUrl );        }, 0 ); // You might need to increase delay time for large images.    };    xhr.send();}

.myDiv{  width: 500px;  height: 300px;}
.myDiv img{  width: 100%;  height: 100%;}

<button onclick="activate_gif()">  Click me</button><div class="myDiv">  <img id="img1" src="https://i.imgur.com/Rsc0qOw.gif"></div>

Restart a GIF animation when you click on a text link

The thing your script does that restarts the GIF animation is to change the src attribute which reloads the gif.

You can do this in many different ways, here is an example:
http://jsfiddle.net/GS427/100/

 <a onclick='$("#img").attr("src","https://dl.dropboxusercontent.com/u/908148/once.gif");' href="#">this</a> 

You could extract it into a JavaScript function that take the image url as parameter. For example

function changeImage(imageUrl){
    $('#img').attr('src',imageUrl);
}

And then use this for example:

<button onclick="changeImage('http://image1-url')">Image 1</button>
<button onclick="changeImage('http://image2-url')">Image 2</button>
<button onclick="changeImage('http://image3-url')">Image 3</button>
<button onclick="changeImage('http://image4-url')">Image 4</button>

Restart gif after content loaded in internet explorer

I'm not sure I understand your question, but you can try to preload the gif, and only insert it to the DOM once it's ready.

var loader = new Image()
loader.src = '' //path to gif
loader.onload = function () {
//use gif once it's ready
$('#layer1').replaceWith(loader)
}

Another method you might try is to remove the image element, and reinsert it

$('#layer1 img').remove()
$('#layer1').append("<img src='" + pathToImage + '>")

There's also a possibility that the gif is kept in the cache and therefore would not reload again when you call it again. In order to avoid that you can add a redundant random attribute and tack it on to the image url.

$('#layer1').append("<img src='" + pathToImage + '?' + Math.random()>")

Everything that appears after the '?' should not affect the actual image, but would insure the image is reloaded instead of being loaded from the cache.

Final suggestion:

Try to replace the src url in the image

 $('#layer1 img').attr('src', pathToImage);

Force gif reload in React

You can restart a non-infinite gif by clearing the image src and then re-setting it.

the way to do this in reactJS is by using component state and a zero length timeout to push to next tick

class ReloadableGif extends React.Component {  constructor(props){    super(props)    this.state = {      gif: 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif',      loaded: 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif'    }  }    reloadGif = () => {    this.setState({loaded: ''})    setTimeout(() => {      this.setState({loaded: this.state.gif})    }, 0)  }    render(){    return <div>      <img src={this.state.loaded} />      <button onClick={this.reloadGif}>Replay Animation</button>    </div>  }}
ReactDOM.render(  <ReloadableGif />,  document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><main id="react">http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif</main>

How to stop and restart an animated gif

the another sites create two files for this.

thumbnail as JPG files for showing on default

and Gif file
when you click on JPG files GIF file replace with that and start to download and showing when you click again on GIF file you see JPG thumbnail.

this is a trick for showing you and you think yourself this is stop and playing system.

---

Related Topics