shuffling through images with jQuery - performance issue

Question

I created a small interactive module where user can shuffle through the images. This module works fine (even if it's not optimised yet) except under iOS. If the user clicks only one image, the shuffling animation is displayed properly however this is not the case when hitting the Shuffle button.

The demo here

The shuffle button code:

$("#shuffle").click(function(){
    $(".slide").each(function(){
        var target = $(this);
        shuffleThis(target);
    })
})

The shuffle function :

function shuffleThis(target, thisType){
for ( var i = 0; i < 5; i++ ) {
    if(i === 4){
        setTimeout(function() {
            var rand = randomizeIMG(thisType);
            var finalRand = rand.split(/_(.+)?/)[0];
            target.append( '<img src="assets/img/rds/'+ rand +'" />' );
            target.children("img:first").fadeOut("slow").remove();
        }, 75*i);   
    } else {
        setTimeout(function() {
            var rand = randomizeIMG(thisType);
            target.append( '<img src="assets/img/rds/'+ rand +'" />' );
            target.children("img:first").remove();
        }, 75*i);
    }   
}}

It seems like iOS failed to repaint the DOM. Maybe a setTimout problem.

How to improve the result under iOS?

How many images are you shuffling and on what particular iOS device are you experiencing this? — Tomanow, Mar 03 '14 at 14:28
In production I have a set of 60 images but it only shuffles through five images before displaying a new one. In the demo you can see the problem occurs even with 12 different images. This happens on iPad / iPhone under iOS 7.0.6. — Nypam, Mar 03 '14 at 14:46

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

To me, this looks like a known issue with setTimeouts under iOS. Maybe this helps?

EDIT: Another thing to try out might be this https://stackoverflow.com/a/10991974/1360368

edited May 23 '17 at 12:13

Community

1
1

answered Mar 12 '14 at 09:53

Ashesh

2,978
4
27
47

I suspected that as I read about setTimeouts issue before! Thanks for the link and for taking the time to review my question. – Nypam Mar 13 '14 at 11:07

score 1 · Answer 2 · answered Mar 13 '14 at 06:46

It's hard to tell exactly what your problem is without seeing the actual final images on the device itself, but there a are a few things you'll want to take into account:

I suspect that DOM manipulation (i.e. adding elements) is more expensive than showing, hiding or moving elements on iPhone/iPad (this is my experience based the iOS+Safari web projects I've done, but I don't have hard facts to back it up, so I "suspect" it).
That said, the time required to change the DOM probably pales in comparison to the time required to load the actual images. I would highly suspect that some of your images are not loading on your iWhatever device in the 75ms you're giving it to load 7 images. Latency is probably going to be higher on a cell phone than on your desktop.
setTimeout() calls may fire later than you expect if the browser redrawing it starting to choke. Many elements in the iOS UI code are designed to provide a responsive interface, and if that means delaying/canceling/skipping slow page animation, it will certainly do that to whatever extent it can.

With those in mind, I would suggest the following:

Load all of the images ahead of time (you can make them visibility:hidden, for example) and simply show/hide them in your loop.
If your setTimeout() calls are still giving you trouble, then load all your random images in and make a randomized-looking CSS3 key-framed animation that puts the images in their "randomized" locations and just play that animation. You could make a few variations if the same animation looks too similar if played multiple times. Use CSS3 steps() to make the images just "snap" into their places, rather than moving.

Hopefully that helps.

All the images are loaded before the animation as showcase on the demo. CSS3 animation seems like a really tough call here, as I have a lot of different images and it needs to be really random. Thanks for your answer though. — Nypam, Mar 13 '14 at 11:04

shuffling through images with jQuery - performance issue

2 Answers2