[Enhancement] Better Performance with many images

[3stadt]

Hi,

I found a way to deal with a large amount of images, maybe this solution is something worth documenting.
Depending on the number of images, there will always be a point where things become laggy.

tl;dr: My solution to displaying a humongous amount of images without lag consists of these parts:

• Create two seperate image sprites, one with motion blur
• Disable all relevant built-in css animations
  • Display a different image depending on the slot state

Sprite creation

Make sure all images for the slots have the same dimensions

So first, you would create two sprites. This way, the browser only loads two images, which speeds things up. I did this using imagemagick, in my case like this:

convert iconsource/IconPerks_*.png -append img/perkslots.png

This command takes a bunch of images (change path/mask as needed) and creates a new image with all source images stitched together vertically.

Then we create a blurred version:

convert img/perkslots.png -motion-blur 0x5 img/perkslots_blur.png

Adjusting styles

In your stylesheet, disable all animations:

        .slotMachineBlurFast {
            filter: none !important;
        }

        .slotMachineBlurMedium {
            filter: none !important;
        }

        .slotMachineBlurSlow {
            filter: none !important;
        }

        .slotMachineBlurTurtle {
            filter: none !important;
        }

        .slotMachineGradient {
            -webkit-mask-image: none !important;
            mask: none !important;
        }

And finally, use your sprites as image source. Since you are dealing with a lot of images, I suppose you are not writing this by hand. So do a for loop for the css and the html with the number of your source images as max. I guess you know what I mean. ^^

Anyway, generate as many css entries as you have images with ascending numbers. Additionally, generate one entry that is applied to all slots:

.slot {
  height: 256px; /* Whatever your image height is*/
  background-repeat: no-repeat;
}

.slot-0 {
  background: url('img/perkslots.png') 0 0;
}
.slotMachineGradient > .slot-0 {
  background: url('img/perkslots_blur.png') 0 0;
}
.slot-1 {
  background: url('img/perkslots.png') 0 256px;
}
.slotMachineGradient > .slot-1{
  background: url('img/perkslots_blur.png') 0 256px;
}

There are two important parts here: The last parameter for backround is the vertical position your image starts - So when all your images are 256px high, this will always be a multiple of 256. The first entry, starting at 0, must not have px added to the value.

Your divs are then generated as normal, with the added slot number:

<div class='slot slot-0'></div>
<div class='slot slot-1'></div>

Enjoy a lag free, motion blurred slot animation. @josex2r If you think this is a helpful hack maybe you could document that or something similar? :)

Kind regards, 3stadt