Optimize laggy resize - javascript

I'm having some trouble figuring out this problem, but I reckon it might be quite common, or have a well-known solution. I did some research but I can't quite see how to proceed here.
I have a page with a series of slides, and a small js script to go from one to the other:
http://analucia.net/test/index2.html
The slides have a max-width: 100%; (and height) so they're resized witht the rest of the window. This is very simple and works very well with 2 or 3 images, but with 30 it becomes extremely laggy, especially with large screen sizes.
I guess manually resizing the window create a lot of events that become overwhelming, especially with large pictures. My intuition would be to use some javascript to "transcribe" all these events into one or two, and thus handle the window resizing in an orderly way.
I found this: https://css-tricks.com/debouncing-throttling-explained-examples/
but it looks quite specific, and I'm not sure it could apply here
So my questions would be:
Would this kind of approach be a good solution to this problem?
My understanding of js is extremely limited and I wouldn't know where to begin to even apply that idea of having a script to get the resize information, so to speak
Any help is very much appreciated!

Related

isotope.js - how to solve rendering wrong spaces in fluid layouts

As for the subject, I've got problems with isotope and fluid layouts. I don't think it's really an isotope problem itself. Probably some render issue browsers have when objects are treated/positioned like isotope does.
Please see attachment. Sometimes it happens. Not always. Often, by resizing slightly the window (or sometimes just reloading) all the spaces just disappear and the layout gets right.
I think it's a quite common problem. If I take a look to thumbs dimensions in firebug, well, they're all just right. So I guess it has something to do with the browser rendering capabilities.
Any idea?
After searching a bit more, I think isotope positions objects in a way that's going to fool the browsers rendering engines when elements are sized with percentage values. Using the percentPosition not only doesn't solve the trick, but cause filtering animations to be far more sluggish.
Modifications to isotope need too much work for me now, but I've just found another script that seems to be specifically coded with responsiveness in mind (thus, demonstrating how common the problem is). I didn't try it yet, but I took a look to the code and I think it's really well done:
https://mixitup.kunkalabs.com/
So, for now this is the answer. Hope it helps.
A brief note: currently, mixitup doesn't support mansory layout out of the box. This was not a problem for me though, since my layout is a regular square grid.

How to prevent window-resizing affects your elements

Okaay, ive been dealing with this problem for quite some time now, and i really need to get an answer now :D The problem is, when im resizing the window, all my elements just messes up. When i try resize other websites(could be anyone; facebook, twitter, even stackoverflow) it does NOT harm any elements. The view just get smaller. How do i do this?
General answer in a general tone:
Conduct some research on responsive web design practice. Learning about different types of layouts (Flexible, full responsive etc.) will certainly help understand the possibilities you have with only CSS and HTML. At least discovering this knowledge will enable you to speak more closely with your developer and head in the right direction.
Cheers!
LaddtheImpaler

Javascript 3d-like carousel for complex content

I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.

Flash causing jerky javascript animations

I'm developing a site which has a flash background playing a small video loop scaled to fill the whole background. Over the top I have a number of HTML elements which are animated using javascript. The problem I am having is that (predominantly in FF, but also in others to a lesser degree) the flash seems to be causing my javascript animations to run rather jerky, and in some cases missing the animation altogether and just jumping to the end state.
Does anybody have any thoughts on how to make the 2 work together nicely?
Many thanks
Matt
You'll notice the same effect on BBC Iplayer - if you've played a few videos, then use the left and right scroller. The javascript animation is no longer smooth.
The is more noticeable in FF.
Chrome creates an entirely separate process for the flash, and therefore smoother, Safari is quite lightweight therefore smoother at times.
Bit of a bugger really - the only thing I can suggest is ensure your swf is optimised for CPU - if it contains lots of code, ensure you doing good memory management.
I had the same trouble once and I targeted FP10 - this offset a lot of visual work off the CPU (therefore the current process in the browser) and gave it to the GPU.
--
Aside from this, you're pretty much at the mercy of how powerful the clients machine is.
Additional for my answer above:
Thanks Glycerine. Do you think there would be any performance improvements if it was compressed into an older format? Or even just a SWF? There is no audio, so it's just an animated background really. – - Matt Brailsford
I think a newer format would be better - if you can do FP10, then again, you'll be able to utilise the user GPU, if your working in CS3, best to go for FP9.5.
Ensure your stage objects are cached for bitmap if your using large vectors
http://www.adobe.com/devnet/flash/articles/bitmap_caching_print.html
This ensures any heavy animation (even animation we regard as light) will run smoother because there turned into pixel data as opposed to complicated vector information. Its a small fix but it may work.
Try and target the AS3 engine as well. Even if your not using code. I keep saying it runs better than the as2, as1 engine with arguments from people but I'm sure you'll find your favourite camp.
If you have very large images scaled down, use a smaller form factor by photoshoping then to a smaller size. This will not only improve rendering speeds, but also swf file size.
Try those.

Javascript Game: What should i know?

I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.
I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.
As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.
The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)

Categories