I wrote this(jsfiddler) plugin that creates a slideshow. It works okay but the problem is that I have to use it for big background images. In Chrome it's nice and smooth but in IE and FF the transitions are really clunky and laggy.
At the following link you can find an example that's very slow in the browsers mentioned.
http://www.friendly-stranger.com/projects/kick/
The images them self are a little optimized to around 180kb.
You may be overthinking this. Why use jQuery to create an image slideshow for the background images? Why not just create an animated GIF and set it as the background of your body tag? That way, the only overhead you have is the downloading of the image.
They both worked for me, just make sure the function waits until the images are loaded to run (jsfiddle does this automatically). I would recommend having the div start hidden, and when it is done loading, appear. it hides the lag (if there is any). http://jsfiddle.net/RT96d/3/
Related
I have a site that I load images only when these are in slightly below the view point.
This way, the site first loads without the images then determine what images are needed to be loaded based on the viewpoint.
When user scrolls, and the image is just below the viewpoint, then it loads them.
It works fine on desktop. No laggy, no stutter.
However on mobile web, when I scroll, it stutters as the images are loaded.
Once everything is loaded, the site scrolls up and down smoothly. Also images are resized on the fly to minize file size.
The question that I have is that, what is the best way to load lots of images?
I am loading them only after the site is loaded, then only if they are just bit below the view point.
Do you think I should load them all to avoid stuttering especially on mobile?
I googleed smooth image loading but I don't think I am searching correct terms.
Anyway suggestions will be much appreciated.
Thank you.
Here is a simple and lightweight JS lazy loader library. It's straight forward and easy to understand.
BLazy.js
There is a walk through example from their site.
<script src="blazy.js"></script>
<script>
(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
Then in your HTML you would setup your images like this. Give it a b-lazy class and a data-src attribute that points to the image.
<img class="b-lazy" data-src="image.jpg" />
ebLazy.js – A lazyload image script
blazy.js examples
I'm using Skrollr.js to animate an image sequence. I took inspiration from how the http://moto.oakley.com site handles image sequences, and built some scripts to help me automate writing a series of images into the DOM. Then, I use Skrollr to change the display:none; to display:block at key scroll positions. My script preloads all the images before dispatching a complete event, and then I initialize Skrollr and allow interaction.
So, basically I have a <div> containing that has a bunch of these:
<img src="seq-000.png" data-0-top="display:block;" data-50-top="display:none;">
<img src="seq-001.png" data-0-top="display:none;" data-50-top="display:block;" data-100-top="display:none;">
<img src="seq-002.png" data-50-top="display:none;" data-100-top="display:block;" data-150-top="display:none;">
...
Now, this is working just fine in Chrome and FireFox (naturally), but Internet Explorer 11 seems to have problems rendering the images during the first scroll through the page. In other words, when I first load the page and scroll the images blink into place like they have not be preloaded, but subsequent scrolls the animation is perfectly fine. It's like IE11 hasn't rendered the images into memory, so the draw speed to the screen has a delay the first time any image is displayed.
I don't think Skrollr is the problem. Perhaps there's some magic CSS setting I should using.
Does anybody have any tips for making image sequences so they look ultra smooth everytime even in Internet Explorer?!?
Thanks!
I have an issue with jQuery ScrollTo.
It skips and there is a lag when applied to my page.
Here's a link to the jsFiddle example that works and here is the same code applied to my page that does not work.
It might function correctly on some machines but all the machines I have tested this on don't!
Might there be an issue with the amount of images I am using?
Is there anything I can do to overcome this?
The problem there is the background image. On "poor peformances machines", using a full page background image like you did and scrolling is not very efficient.
For instance, my machine at work lags as hell on your page, either using the top menu or regular scrollbar. On the otherhand, my MacBook Pro handles your page perfectly with a smooth feel when using the top menu to scroll.
I tested it using chrome on my machine, and removing the background image using developers tools. It now works perfectly. As soon as I put the background image back, it starts lagging again.
Its a bit jumpy on my machine (your site that is), but one thing i noticed that may help is that it is really nice and smooth smooth if i very quickly click back and fourth between 'Senior Executive' and 'Experienced Hire'.
Is there any callback or some calculation being done before, during or after the scroll perhaps?
I have a container div that holds about 20 more divs that float left. When I resize the parent div with a javascript animation using Tween.js the floats don't reflow to the new size unless I mouse over one of the divs.
It seems like something is preventing the page from refreshing.
I'm thinking maybe there is a way through javascript to force the display to update?
UPDATE:
I've put it on JS Fiddle:
http://jsfiddle.net/mattlundstrom/fNUhn/
Click any thumbnail to toggle the animation.
This version uses TweenLite to animate the "Left" CSS of the #project-container. Notice how you must move your mouse after the animation to get the container's contents to reflow.
I get this result in Safari 5+ OSX and Chrome 20+ OSX. Works as expected in Firefox 13.0 OSX.
UPDATE 2
Video of what I'm seeing:
http://f.cl.ly/items/1R1n2s0U3I3c1M3s2K0T/lundstrom_float_issue.mov
I was able to recreate your issue just as you said. It seems that it is an issue with webkit redrawing or measuring the elements after an animation or transition.
This isn't the best solution by any means, but for the time being at least it will work and hopefully what I found will help other people to be able to find out more.
If you add an onComplete to the animation, and trigger the .project mouseleave, it looks to work fine:
function completeAnimate(){
$('.project').trigger('mouseleave');
}
function contract(){
// PROJECTS CONTRACT RIGHT
TweenLite.to($('#projects-container'), .5, {css:{left:"300px", opacity:".5"}, ease:Expo.easeInOut, onComplete: completeAnimate});
}
So here is my jsfiddle which has a few tests and other animation tests so that you can see some of what I tried.
jQuery animate() and css keyframe animations have the same result as the Tween code you are using, HOWEVER, a straight style update works fine.
$('#projects-container').css('left','300px');
No issues with that at all, but of course, no animation either.
Some other things I noticed was that if you take out the .project event bindings, it still doesn't redraw correctly, however if you move you mouse it still doesn't. It simply stays that way.
I also tried forcing an element redraw using a few tricks you can usually use to force a redraw. I tried this oncomplete and at intervals after the animation begins, but had no luck with any of it.
You can also combine the two tweens into one with the properties on both, just an FYI.
Hopefully this will help someone find the true issue that's going on with the webkit transitions.
I have been using this site for awhile but never posted, I ususally found my anser.
However I seem to have a valid question regarding fading.
I have a simple javascript fade in script, with a functional cross browser opacity setting function. I am trying to fade in a large part of the webpage, but the large size or complexity of the elements in the div seems to really slow down the render in a couple browsers. In some browsers it works too fast, so I know the code works.
Does anyone know anything about the limitations of opacity rendering in different browsers?
I know I could overlay a simpler div with opacity but this just adds code when the existing code works, just not sure why there should be such drastic differences in the time it takes to apply opacity between the browsers.
jQuery has fadein/fadeout. Have you tried them?