I'm using fullpage.js for an html5/css3/jquery based app for Android 4.2 tablet, that I generate with PhoneGap web service. On PC and emulators everything works smooth and fast, but on tablet itself scrolling between sections is very slow and choppy. Scrolling between slides is a bit better, though not smooth either. I have css3: true in fullpage.js options and I use very light-weight images and elements for the app. Let's say each section loads around 50kb per scroll. I have fixed background for all sections and it stays in place without lags, only loaded per-section content is getting choppy (it looks like it's loading in square patches).
When I open the same html files in tablet's Chrome browser, everything works smooth as well. So I believe it's Android's default WebView causing this choppiness and issues. Is there any way to make it work smooth with fullpage.js?
The link you just posted took 94 seconds to load on my PC using Chrome. And it had plenty of console errors.
Besides that, it is clearly a problem of performance with your site.
You are trying to create a HUGE website layout. With 30 sections and nothing less than 105 slides...
Do not expect it to work smooth on a mobile phone. Your layout in a 1280x1024 resolution is creating a layout of 28.170 pixels height and a few more thousand pixels width. And all of it has to be moved on every scroll.
You can probably make it easier for your browser if you implement some lazy load technique (or even an ajax one for the section/slide contents). This way you will still having the huge layout but it will be empty at least.
Check out this answer for that.
You can even take a look at the lazy load option fullpage.js provides.
Also, using the option scrollBar:true might improve the performance.
Related
I'm working on an app that shows the floor plan of a trade fair. This is a high resolution (3500x4600), but fairly low file size (400kb) PNG image. I have a little component that allows to pan / zoom it.
Now it all works just fine on iOS, but on Android I just cannot get it to work. If I just try to load it in the normal RN (0.56) Image component I get a blank screen. I'm testing on an HTC One M8, which is not exactly brand new, but also not super low end (2 GB Ram). Funnily enough, if I convert it to a 2,6 MB jpg with the same dimensions, it will show up, though the quality is so bad, you cannot read any of the labels.
There are some mostly older github issues on this (like here and here), but none of those solutions (android:largeHeap="true") work for me.
I tried using react-native-svg, but it has the same problem (I guess it eventually gets rasterized?).
I also tried using react-native-fast-image, which uses Glide under the hood instead of Facebook's Fresco, but (you guessed it), it also doesn't work. If I just load the image, it will get downsampled (worse than the jpg). I tried to get Glide to stop doing that (using override), but then I get a blank screen again.
I found this library, which I guess does exactly what I want, but I'd have to wrap it for RN use... which would be quite a bit of work.
Anyone have an idea?
The idea is to build a website which can grant a mobile and desktop user the full experience. 'The full experience' meaning the use of jquery.
The most important thing is accessibility, so I'm wondering if their is a cross platform way to build a slider/carousel which supports text, links and most importantly touch swipes.
To improve speed, I'd much prefer to load the slides seperately. I understand ajax maybe the solution.. but haven't a clue how. Can anyone direct me towards any basic tutorials that cover this?
A follow up question to the last.. Is ajax safe for dynamically loading content onto mobile devices too?
Also in terms of website layout. Most of the layout will change depending on css media rules when the page is resized. But there are a few elements that will need to teleport depending on the size of the screen.
I considered creating separate elements that would be hidden and shown with jquery/css, but not particularly liking the sound of the code being loaded when it's not needed.
This is slightly different to the sliders in the sense that this code needs to be instantly responsive if the screen size changes (for example, a tablet user changing from portrait to landscape.. or a desktop user zooming in.)
I just don't like the sound of code being loaded if it's hidden.. what is best practice for this?
Again the questions are..
How can i go about building a cross-platform slider, that allows text,links and touch swipe (literally have no idea where to start with touch swipes.)
How can I dynamically load content? (with ajax)? Will this work with smartphones too?
Do people load 'layout' code (on page load) that is only visible if certain parameters are met (eg screen-size.) An example being 2 different menus, one for a small screen and one for a large. Or is there a safe way to load layout code only when it is needed, which would reduce page load times (especially for mobile users.)
thanks
3) touch swipes work the same way as a click + drag, so you should be able to use the same code for mobile and desktop. Here is a great example of this: http://scripterlative.com/files/dragdivscroll.htm
Just finalizing a project for a client, will remove link once answered.
http://da.cronus.fweb.com.au/
On iOS and desktop the animations/scrolling are very smooth. As soon as it hits android things get very laggy (tested on nexus 7, Galaxy S4 and galaxy tab 3)
Anything i can do to speed things up?
first of all some images are pretty heavy for mobile devices
it should not affect the animations but still ...
codewise the only part that seems slow to me is
$('.column p').each(function(){
if($(this).html().length < 1){ $(this).remove() }
})
in custom.js line 665
so i guess if the animations are slow it must be a device / spec issue
but there is probably something to change with those line of code that could help your javascript.
For Sliding you can use Flexslider plugin. Plugin supports touch and it is responsive. I think some problem with sliding plugin only.
Switch from java script animations to CSS3 animations - they are hardware accelerated on most Android 2.3+ devices.
jQuery itself is OK on Android. I use it all the time. This could be a poorly coded slider plugin. However, you have some large images around 2mb and I think this could be optimized. I would do this first. You can also move the js files to the bottom and also compress and merge them. These are all optimization techniques that need to be done first and are not a waste of time. I'd also use responsive CSS on the images to display different sizes for device resolutions. Bootstrap has some solutions for the images sizes. After your page is optimized for mobile then you can re-evaluate if the slider is still slow or it was just large images.
I tried it on my Galaxy Note II and it works quite smooth. If you are trying to improve it in anyway, i would recommend swipejs.com for mobile and flexslider for the desktop version (although flexslider is completely working on mobile too, i just found swipe.js to be easier to setup)
Good luck and have fun! :D
Your question is very generic.So i would say, you need to minimize background processing as for as possible in scrolling(if doing some processing for scrolled data) or in animation or in any other activities.
As mobile devices have less resources.
Animation performance on android is not something you can just bolt-on with an IE jQuery plugin 'that makes it work in IE8' and expect it to work similar on android.
Remember that Android runs on a wide variety of devices, all with their own performance issues and some with even crappier versions of the android webkit variant than others. Expect huge differences between last-generation quad-core tablets/phones and low-budget devices.
My advice:
try a jquery plugin that automatically uses css3 animations instead of jquery looped where available (but no guarantees there)
try a jquery plugin that optimizes the jquery animations with the use of requestAnimationFrame (
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ )
As others have mentioned: You can't just throw 2mb images to a phone and expect them to animate smoothly. Optimize assets for the device you're serving them to (e.g. a max 800x600 pic for a phone)
If all that fails: Optimize manually, by enabling android browser debug settings and adding -webkit-transform 3d-transitions to the elements that need to animate so that the layer is rendered by the GPU.
You mentioned performance on android, but the first time that I loaded the site on Firefox it was pretty slow as well. After looking at your slide images, I found that the slide are way too big (~2mb), as other people have mentioned.
PNGs aren't the best choice unless you must have transparency, as they are bigger than JPEGs right off the bat. I would take the images and optimize them for the web using Ps. If you really wanted to be super-efficient, you could have another set of smaller images intended for android. Hope this helps you out. Happy programming!
Grey
If I were you I'd use css transitions. I've found that they work much better on mobile especially Android. I realize that in a desktop environment you'd have much broader support using a javascript transition but mobile is a different story.
You could hybridize....
http://jsfiddle.net/PHPVT/
$("#target").on("click", function () {
$(this).addClass("clicked");
})
use javascript events to fire css transitions :)
I use it all the time when I have to build for ie8 since it doesn't fire :hover states on anything other than anchor tags.
I have an application with a WebView, where there's a long list of posts that Autoloads via Ajax when the user approaches the bottom of the scrollable area, so I display the word "Loading ... " and an animated GIF beside it created via Ajax Loader site.
The problem is that this Gif sometimes appear as a still image in some devices with Androind 2.3.5/2.3.6, and in other devices its animation is extremely fast, and in other devices it's extremely slow.
E.g. Galaxy S Mini with OS: 2.3.6 (it appears as a still image).
Galaxy S I9003 with OS: 2.3.6 (it plays in a very very fast rate).
Galaxy S2 with OS: 4.0.3 (It plays very fast then suddenly becomes extremely slow but it's still animating).
Is there a standard frame rate or any work-around for this issue ?,
Here's the image That I'm using:
------> <--------
I know Facebook's app was using WebView with loader at the bottom of the feed but I don't know if it was animated gif or not.
I know that older versions of Android didn't support animated GIFs but I'm talking about new version
I had exactly the same problem and found no solutions! Animated GIF behavior seems really inconsistent across devices. That's the bad news. The good news is that I've made a work around, specifically for ajax loaders like yours.
You'll need to make separate image files for each frame of your GIF. It sounds horrible but it worked out ok for me - My 8 frame 8kb GIF turned into 8 png images totaling 11kb, and I got the bonus of 8bit transparency so I don't have to worry about the background color. It does mean the client has to make extra requests for the separate images though, so the fewer frames the better. I called the images 0.png, 1.png ... 7.png and put them in a folder to keep them neat.
Now the code! I'll explain it below.
HTML:
<img src="images/loader/0.png" id="headLoader" />
<div id="loaderKicker" style="visibility:hidden;"></div>
JavaScript (jQuery):
var loaderImg = $("#headLoader");
var loaderProg = 0;
setInterval(function() {
$("#loaderKicker").html(loaderProg);
loaderImg.attr("src", "images/loader/"+loaderProg+".png");
loaderProg = (loaderProg+1)%8;
}, 300);
First we have the img that we will animate. We use setInterval to change the image url to cycle through the frames. Really short intervals obviously put load on the device so we don't want to go nuts. I have a really cheap Android 2.2 device and 200ms+ intervals seem to work ok without wrecking app performance.
The loaderKicker div is there to make this work on older devices (like the ones we're targeting :) ). Android seems to ignore the calls when all we do is update an image url, so we get around this by updating the contents of a hidden div. I tried always updating with an "x" but it seems that the content has to actually be different. The slide number works well.
So that's it! It's a bit of a hack job but it works on everything I've tested on (Android 2.2, 2.3, 4.0, iOS6, Firefox, IE, Chrome) and if you're only doing it on one ajax loader that you'll then use everywhere it seems ok.
The other, completely separate, solution is to animate the image using HTML5 canvases but I couldn't tell you anything about support for them in old devices.
Long version:
I have a very particular issue. I'm a multimedia artist working at the moment together with an animator - we are trying to create an interactive animation that I want to make available online as a website and as free app on the App Store and the Android Market.
But here's the key problem I am faced with now.
The output video of the actual animation will be massive in resolution - probably something like 4 or more times the HD resolution, but it's for a reason. The idea is to let the viewer only watch a part of the video at one time - like when panning around in Google Maps or any other canvas-like view (eg. MMORPG or strategy computer games). So you only see a part of the whole image at one time, and then you can move around to see what's "behind the corner".
So the animation would be a Google Maps-alike canvas (panning and perhaps zooming if there's enough time to implement it) but with video instead of images.
The big problem that comes up is performance. I was thinking that the best way to make it run would be to scale down the video for different devices accordingly. But then even just considering desktop computers for now - scaling down to 720p for HD screen means there is in total of about 4 times 720p in resolution, which is probably too much for an average computer to decode (Full HD is quite often already problematic) - and the output resolution would be more than the 4K standard (5120 by 2880, whilst 4K is 4096x2160). Anyhow, that is unacceptable.
But I reached the conclusion that there is really no point in decoding and rendering the parts of the video which are invisible to the user anyway (why waste the CPU+GPU time for that) - since we know that only about 1/6th of the full canvas would be visible at any given time.
This inspired an idea that maybe I could split the output video into blocks - something between 8 to 64 files stacked together side by side like cells in a table, then have a timecode timer playing in some variable and enabling the video-blocks on demand. As the user drags the canvas to the visible element it would automatically start the playback of the file at the given timecode read from the global variable. There could be some heuristics anticipating users movement and prematurely activating the invisible blocks in order to remove any delay caused by seeking within video and starting the playback. Then blocks which are no longer visible could deactivate themselves after a certain amount of time.
So my first attempt was to try and see what are my choices platform-wise and I really see it comes down to:
HTML5 with JavaScript (heavily using <video> tag)
Adobe Flash (using Flash Builder to deploy the apps to all the different devices)
And HTML5 would really be more preferable.
So I did some research to see if it would be at all possible to even synchronize more than one video at a time in HTML5. Unfortunately it's far from perfect, there are two available "hacks" which work well with Firefox, but are buggy in Webkit (the videos often get out of sync by more than a few frames, sometimes even up to half a second, which would be quite visible if it was a single video split into blocks/segments). Not to mention the fact that I have not even tried it on mobile platforms (Android / iOS).
These two methods/hacks are Rick Waldron's sync as shown here:
http://weblog.bocoup.com/html5-video-synchronizing-playback-of-two-videos/
And the other one, also developed by Rick is the mediagroup.js (this one doesn't work in Chrome at all):
https://github.com/rwldrn/mediagroup.js
My test here: http://jsfiddle.net/NIXin/EQbAx/10/
(I've hidden the controller, cause it is always playing back earlier than the rest of the clips for some reason)
So after explaining all that I would really appreciate any feedback from you guys - what would be the best way of solving this problem and on which platform. Is HTML5 mature enough?
Short version:
If I still haven't made it clear as to what I need - think of a video zoomed in at 600% so that you can't see everything (some bits are off screen) and you need to pan around by dragging with your mouse (or flicking your finger on mobile devices) to see what's going on in different places of the video. How could I do that (have the video run smoothly) across platforms, while retaining the high quality and resolution of the video?
Thanks a lot, let me know if you need any more details or any clarification of the matter.