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!
Related
On my website, I have several images with an onload and onerror callback
<img onload="imgCallback()" onerror="imgCallback()" class="article-img" src=":assets:/price/12-2.jpg" alt="A chart showing vitamin and mineral content of liver, kidney, spleen, heart, broccoli, kale, banana and apple" />
Some initialization is only done after all images have loaded because I need the full height of the container element after all images are shown.
This works fine on my desktop, however, it seems to not work on some mobile browsers. I have tested this on my Android Chrome browser and it seems to only load images lazily after I scroll far enough down, delaying page initialization that is expected to happen on the initial loading of the website.
I can't really think of any other way of solving this as I need the full width of the container post image loading, something I don't know statically, therefore I am asking if there is a way to signal to the browser that it should eagerly load images?
Found an answer here.
I simply had to add loading="eager" to my image tags.
I am drawing many frames on a canvas using KineticJs library.
I am creating a new javascript Image object with the relevant image source for every frame and setting the new image on the canvas after the image loaded.
I see that it takes about 22ms on chrome and about 600ms on ipad safari ... that's a big difference, has anyone experienced such a behavior and does anyone have any insight on how we can overcome this issue? For example maybe I can force the ipad to use its gpu.
Any response will be highly appreciated.
This page says that iPad cuts off loading images at 6.5mb. I'm not sure if this is still true but I've definitely noticed throttling before 6.5 mb.
Since I'm using a photo scroller, what I've done is load the image names in a hidden html field and then load the next image in a hidden image tag 2.5 seconds before the scroller displays the next image. Of course, you could also load the image names in a JavaScript array. I can provide code snippet if still interested...
I'm having issues with a parallax site I am building using Skrollr.
I've built a site that has the same effect as https://www.spotify.com/uk/. The effect being large full width background images that move slower than the natural browser scroll, and have text and other images moving on top of them.
When viewed on a desktop browser the site functions fine and performs perfectly. The problem I'm having is when testing on an iPad (iOS 6.1.3) and you release your finger from the screen and Skrollr's intertia animation takes over, the large background images and other content on the screen start to jitter and jump on the screen. This does not happen when you still have your finger touching the screen and scroll, only when you let go and the easing takes over.
A couple of things I've tried are:
Setting webkit-backface-visibility:hidden on all of the background images, and skrollr-body div.
Animate elements using –webkit transition: translate3d
If anyone could shed any light on why I'm getting this page flickering issue that would be great.
I had a very similar issue (i.e. Skrollr / iOS parallax background image 'flicker'). I believe you'll find it's related to this: cubiq.org/you-shall-not-flicker
Simple solution (from the article): -webkit-transform:translate3d(0,0,0).
I have a site, which upon clicking an image a lightbox pops up (eg http://www.huddletogether.com/projects/lightbox/).
Our customer still has some machines which run IE6 (upgrading is unfortunately beyond our control), so in order to block out some SELECT elements, I have used the old IFRAME shim trick (as described here: http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx).
However, I have the following problems:
The lightbox doesn't appear until the mouse is not longer hovering over the page - moving the mosue to a different window, or even just to the scroll bar causes it to appear;
While the mouse is over the page, the following doesn't happen:
Any jQuery animations related to the lightbox stop (or to be more precise, the animation continues in the background, only to have finished upon mouse out);
Animated gifs inside the lightbox stop running until mouse out;
Javascript in general stops until mouse out.
Everything seems to run fine in our other supported browsers (IE7 and FF).
Unfortunately I don't have a link to show you these effects, but hopefully I have explained myself enough for somebody to help (which will be very gratefully received)!
Edit:
Forgot to say, I know this is related to the IFRAME, as removing it causes the javascript to run fine, but obviously the ugly SELECT boxes bleed through the top DIV.
It sounds like you have something heavy running in a mousemove or mouseover event handler that's blocking animations, animated GIFs, etc.
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/