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 .
Related
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.
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
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.
I'm loading 2 embedded svg-lets in a page. One animated one not. They're loaded in sequence with a setTimeout.
When I load the animated first all goes well, the animation starts as expected and the second static svg is correctly displayed afterwards. When I first load the second, and afterwards the animated one, the animation does not start.
Code is here: jsfiddle switch #svg1, and #svg2 in the javascript.
Upon browser checking I found out this is probably a webkit bug as chrome and safari both show this behavior FF 12 and Opera are well.
Can this be fixed with JS code or should I file a bug with webkit?
== Added
I think the question should be rephrased why the animation does not start after the svg is loaded with a settimeout.
As Jared investigated below it works when the element is present in the DOM and is reordered via dom manipulation into the focus element, Chrome and webkit need a kick with a beginElement() call to the animate element. This still doesn't work out for elements constructed from plain text. As I only do have a mac and I still consider this a hobby project I leave MS IE completely out of the loop.
Well, it took quite a bit longer than I anticipated, but I got it worked out. Basically, the method you were using with the semi-SVG and the regex on the markup, etc., was to say the least not quite the way to get it done.
The answer is to use svg DOM animation methods and attributes, especially to start/stop the animation when you want it to run. Apparently, Firefox was just fine with reinitializing the element and the animation just by manipulating the inner HTML/markup. Chrome (Webkit?), however, actually needs you to programmatically access and control the element. I have not checked in IE, Opera or Safari.
I redid the example, leaving out the arrow altogether, as it is unrelated to the problem. I instead concentrated on creating and testing the animation functionality. The critical points you were missing before were:
var $lasso = $('#lasso'),
animater = $lasso.find('animate')[0],
...
animater.beginElement();
...
animater.endElement();
Here is the demo I made, which is significantly different that what you have in your question:
http://jsfiddle.net/9hBfs/
What I call the "lasso" effect is still there, though.
I would reference the Mozilla Developer Network (MDN) site, as they have a lot of great information and are a highly trusted authority:
https://developer.mozilla.org/en/SVG
https://developer.mozilla.org/en/SVG/Element/animate
http://www.w3.org/TR/SVG11/animate.html#animation-mod
http://www.w3.org/TR/SVG11/animate.html#InterfaceElementTimeControl
http://www.w3.org/TR/SVG11/animate.html#RestartAttribute
I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.
Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.
When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.
So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.
As anyone experienced such behavior within safari?
It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).
I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.
Either way I appreciate any advice on were to start looking?
How do one goes about debugging this issues in safari?
Thank you.
Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.
CSS concatenation of multiple files (if you have them) is also recommended.
If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.
My shot-in-the-dark guesses lead towards:
You may find that one of your content blocks is causing the issue.
You may find that a different library you are using is causing the issue.
Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
Perhaps you need to specify the an exact width/height of some of your Grid Containers.
Small update:
(new update at bottom)
http://www.howtocreate.co.uk/safaribenchmarks.html
And also something that is working is this small script:
<script language="JavaScript">
// CREDITS:
// Automatic Page Refresher by Peter Gehrig and Urs Dudli www.24fun.com
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http:
//www.hypergurl.com
// Configure refresh interval (in seconds)
var refreshinterval=20
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
// Do not edit the code below
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown()
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded)
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes")
{ window.status="Page refreshing in "+reloadseconds+ " seconds"
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime
</script>
I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...
########UPDATE##########
Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.
Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.
Maybe ill try calling the js a second time after a few ms have passed of loading.
I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)