I have a website i'm designing right now, and i'm new to using JQuery. I'm noticing on my slick-carousel slider that the slides and styles adjust them self's while the user is loading the page for the first time in the browser. I have a few media-queries in place for different resolutions, and it seems that it has to adjust.
Is this because of the way i wrote the code, or is this something that happens with Javascript? What's the best practice to avoid this?
Here is the site link - Advanced Litho Website Re-design
Look at this URL: https://gtmetrix.com/reports/www.advancedlitho.com/aCuNhAl7
Here you can see that your images are huge in size. GTMetrix is showing that scaling your images properly can give you a boost of 1.9MB
Do whatever is said on the test and you should be fine.
Related
When on my website large amount of data like picture and gallery slider and data along with animation is being loaded it causes the scrolling of the page slow. when I try to scroll the page through the arrow keys the scrolling becomes almost zero with lags between them.
all the javascript files and css are being loaded from cdn links.
is there any specific reason why it is getting slow scrolling. I have used AngularJS.
This is just a guess, but you need to optimize all your photos for whatever size you are displaying it for because they are likely too large. You can use this link to create your new image files:
http://optimizilla.com/
Using the one time binding with angular and increasing the gallery sliding time and there are many way in which angular can be optimised.
https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135
It helped in my case
I am developing a website using parallax. Just a brief note on what I did so far.
I used the skrollr plugin for generating the parallax effect. With this plugin I was successfully able to move elements with different scroll speeds. However, there are a few major issues I really to resolve.
Given your understanding and guidance I look forward to get through them.
Here is what I am trying to address:
1) The site that I developed is not responsive with parallax. Data attributes for elements are written inline (and thats how so far I think they are written: inline). So because of that even on screen resize, the inline styling of data attributes remains intact. Hence, the responsive stuff for parallax (on desktop version) is not able to produce same effect on mobile versions.
2) I checked the sony website. Link : http://www.sony.com/be-moved/
They have used parallax and the site is responsive.
Parallax websites are based more on the imagery content. So, how does the site load faster when the images are of huge sizes. (Running into MBs). The sony website has very heavy images (size running into MBs). How do images of such heavy sizes load so fast?
3) Again, coming back to the sony website. On scrolling the user is shown various perspectives / angles of sony products. So, how are the multiple perspectives of every product captured for scrolling.
How is such precise sequential image with varying perspective for every product shown on scroll?
Its the entire background image that changes perspective. So, how is that done? Thats not just plain parallax, right?
I am mentioning this site because its implemented in a differenet way from other simple parallax websites. Sony's implementation is what I am interested in!
4) What would be best to do? Changing background images on scroll(like the way its done on sony) or changing the position of single elements using data attributes?. (like its done on www.numero10.ch)
I have been asked to implement parallax in two ways:
a) only move the elements within the background. Like if its a sky image with two clouds on the right. Then just consider moving the two clouds to the left on scroll.
or
b) Have different background images with the two right clouds moving to the left. So, that means I will have a volley of images for just moving the clouds from right to left; with every image having two clouds shifting towards left by pixel positions.
Looking forward for a reply. :)
Thanks for your patient reading.
I think this will lead you to the right direction: https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
It explains in detail exactly how the Be Moved website is constructed.
2) I believe they use something called "Lazy Loading" which is displaying a "fake" lighter image until all the HTML,CSS,JS is loaded to then load the real images and replace them.
3) That is not mere parallax , they are using the canvas element ( How exactly I don't know but check the page source )
4) It is better to leave an image as a fixed background and work with smaller elements.
I think that site is not just parallax layered scrolling, It is a combination of a sequence of video clips triggered on scrolling. I have not inspected the element of site but I think so. But site is loading tremendously fast compared to other such sites because of your cache in your system and implementation of lighter images in the starting and heavier images at last
My PhoneGap application uses slide in and slide out animations using entirely CSS animations.
You can find the project I based my app on here.
As you can see from the demo the slide transition is quite smooth, but as soon as I add images, after the new page is loaded it flickers/blinks for a fraction of second. The interesting thing is that all the UI elements are shown on screen and then the flickers occurs. More, sometimes the page scrolling becomes buggy and it doesn't let me scroll to the bottom of the page where my images are.
I cached the images using CSS to improve image load but again no luck.
I also found on different blogs about a similar issue on JQ mobile and tried adding without luck:
webkit-backface-visibility: hidden;
You don't know how much I appreciate your help I spent my whole Saturday trying to figure this out.
After some hours of fiddling I realized that the issue was because of the scrolling mechanism and fixed header which are poorly supported by -webkit browser. I am now using iscroll 5 and the issue disappeared.
it is due to you JS files
if you load the more js file on html page then it will take time you will find the filck in phonegap application
when you develop application in phonegap then try to use single page architecture to develop application that must be the better option
even i am suffer this problem.
So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.
I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net