How to replay an animated GIF in javascript (vanilla) - Without JQuery - javascript

My current issue is that I have a loading bar animation on my web-based app that is shown (obviously) when the whole page or specific things are loading up. It is supposed to look like one of those Samsung TV Apps so it needs to be quite polished with the UX.
What me and my team are doing right now is a mix between creating an element for it and I assumed it gets cached in the local device which is an issue. I've known of a few ways that I can go around this like adding a Math.random() query at the end of the src url but I'd rather not follow that route for now.
I also saw a way that I believe involved simply setting the element.src = 'theSameUrl.gif' URL to be the same and I assume forcing the device to reload the file instead of using the cached one.
I would also be open to trying new file types that could make this a lot easier but I must keep in mind that this app will work on a LOT of different hardware, from Samsung TV's to BT Boxes or even Virgin Media Tv Boxes, amazon firestick etc.
At this point I'll take anything :P

You can "force it" to reload by wiping it source: img.src = ""
Then you set it again: img.src = "your_src_path"
This way your .gif will start from zero, at least on Edge, Chrome and Firefox, it should work the same way on a TV.

Related

How does web image caching work and why does this website I created only work properly offline

This is my first post, so please don't get mad if I did something wrong. This is the most complex website I've ever made. When I host it on my own apache server using ngrok, it does the same thing...
So this is the website hosted:
https://zanemechem.000webhostapp.com/
offline:
https://drive.google.com/file/d/0BxbmcM0U2BHcRVBVZzlwMml2QmM/view?usp=sharing
Basically, It is designed so that when you load the website, the images all get put in the cache of your browser, and then when you scroll down, that movement gets translated into changing the gifs which are the background out, and then placing a placeholder png over them.
offline, the website works perfectly, but hosted, the animations load properly, but after playing around with it, they break, and stop loading.
I've played around a bit with a setTimeout function, to make sure the png doesn't load too fast, but it doesn't seem to work.
The files are also very small for gifs, so the size of the file can't be the root of the problem. I believe it has to do with this section of the js:
function createImage(image,gif,previous){
$("firstgif").css({backgroundImage:"none"});
var img = document.createElement('img');
img.src = image;
$("#loader").show();
$("#loader").css({backgroundImage: "url("+previous+")"});
console.log(previous);
$(img).on("load", function(){
setTimeout(function(){$("#loader").hide();
$(gif).css({backgroundImage: "url("+img.src+'#' + Math.random()+")"})},250);
});
I feel like there is something major I am missing but don't have the knowledge to find it. If anyone here possesses that knowledge, help would be much appreciated!
If you need to control the gif playback (gifs only have the option of playing once, looping for a set number of plays, or looping infinitely), you will need an external lib. It will parse the frames and provide you with methods for controlling playback.
There are many options for this, but here is one I've used. It works. https://github.com/buzzfeed/libgif-js

Chrome DevTools freezes on large data uri

I am working on a project that uses image data uri's to preview images using the style background-image: url(data:...)
My issue is when using the DevTools it freezes for awhile on large backgrounds because of the amount of string data needed. I can get around this in development by using an external url for testing instead, but I would like to know if there is any way to get Chrome to stop trying to show all the data?
I know Chrome could solve this by just truncating the data for me, so maybe it is a bug, but I'd like to know if there is some setting or way to get around this.
Ran into the same issue here. If you disable word wrap in the Elements section of the DevTools settings it helps. Might still give a lag but it should at least let you browse around.

iOS7 webkit crashes frequently - not freeing up memory?

I'm noticing my Phonegap app is having some memory issues on iOS7 that weren't happening on iOS6 .
long iScroll lists with many images
displaying images from the phone's album (9mp) will crash after you view several
For #1, this was never an issue on iOS6, regardless of device.
For #2, I am re-using the same DIV element to display the next picture, so it seems that the previous image is not being cleared.
The techniques mentioned in this post no longer appear to work in iOS7:
iPad/iPhone browser crashing when loading images in Javascript
The best solution for this problem I found is the following code:
var img = document.getElementById('imageID');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' +
'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
setTimeout(function() {
img = null;
}, 60000);
This sets the src attribute to a tiny gif and then waits long enough for garbage collection to happen eventually.
See: http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
This should work for you. I could verify that the memory is released by using the Xcode instruments. Unfortunately this solution doesn't seem to work for homescreen apps which I am using.

Animation runs slower and doesn't replay without page reload in chrome

Hi I'm following a tutorial in using easelJS for writing browser based games. And the tutorial is going fine but I've noticed some problems whilst playing the animations on chrome.
Chrome runs the animations slower and once played through once the same animation will not play again unless I reload the page.
Running in Firefox it doesn't have any of these problems.
Here's the link: (use inspect element for code)
http://david.blob.core.windows.net/easeljstutorials/easelJSSpritesTutorial03.html
I've heard there are some caching problems in chrome so I thought this might be the problem.
Manually deleting the cache does in fact allow the animation to play again without a page reload, but it still runs slowly (compare it to firefox).
As I want to code for cross browser compatibility is there a supported way in chrome to combat these problems? Such as blocking storing the images in cache or something? (A last resort I hope)
Thanks in advance,
Kyohei
EDIT: It seems the speed of the animation is the same on ie10 so not sure what speed it should be you know.
The reason this will not work after a "reset" is that you are relying on the image load events to kick off the animation. This will work the first time, but the second time, the image is already loaded, and therefore you will never get an onload event from the images (meaning no "startGame()".
Since this is a simple example, maybe the best approach is to create new Images each time. Just move these lines into your init:
function init() {
var imgMonsterARun = new Image();
var imgMonsterAIdle = new Image();
// Other stuff
}
i read an article Fix your Timestep it will help you , just need to convert it to javascript , read it carefully .

Images placeholder getting stuck behind iframe (just on Windows machines)

I'm trying to get it so that the clicking the image will play the video underneath. It works absolutely fine in all Mac browsers - here...
http://jsfiddle.net/SparrwHawk/KtbYR/14/
But doesn't work on Windows at all. Maybe it's a Windows security thing, maybe iframes can't have anything underneath? Not sure why this happens. Can anyone offer a work around?
I'm looking to place a still image over a video - the ones that YouTube generate are often blurry, whereas if I place my own over there I can ensure it's of high quality.
Simply add wmode=opaque to the URL params.
Using your code: http://jsfiddle.net/KtbYR/15/
EDIT: See this answer for an explanation

Categories

Resources