CODEWITHSUNDEEP
jquerycssperformancebrowserdom-manipulation
Matthew Ruddy
Matthew Ruddy

Reputation: 925

Slideshow DOM manipulation

I've been looking at various jQuery based slideshow scripts, interested in the different approaches used and how they handle CSS3 based transitions and DOM manipulation. I've a slideshow jQuery-based WordPress plugin but it is a little dated and so I'm working on re-coding it.

I'm very familiar with jQuery, been using it for years now, and having written a publicly available plugin I've seen some extreme use cases where 50+ images have been used with images upwards of 1920x1200+ (photographers mostly).

In doing some research on the best ways to approach such scenarios better than I am already, I've seen two popular trends and I'm wondering which is better.

The first is to simply position the 'slides' inside a container which is then animated. Often, the container is absolutely positioned to take it out of the document flow and speed things up (especially when using CSS3).

The next is to keep between 4 and 8 'slides' within the DOM, and append/remove them as the user navigates.

Which of these approaches is the better approach? Appending/removing from the DOM is considered the most expensive alteration to make, but in such as scenario is it less expensive than manipulating a container containing 50+ very large images outside of the document flow? Especially on mobile devices.

Upvotes: 0

Views: 228

Answers (2)

jfriend00
jfriend00

Reputation: 707288

If you want to be the most efficient about memory usage with very large numbers of slides, then you would want to only have a few slide images loaded at a time (the next few slides coming up), not the entire set.

At the same time, you need to preload a few upcoming images so that they are ready to go when you want to show them because the most time consuming task is downloading the images to the local browser over the internet before display.

If you're only preloading a few upcoming images, then you can either:

  1. Preload them to an img object that you hold in your javascript and then insert it into the DOM when needed.

  2. Preload them to an img object that is already in the DOM but hidden and then when you want to display it, you can make it visible.

As long as you're only preloading a couple images in advance and removing the previously displayed images so they aren't kept in memory when no longer needed, there should not be a significant difference between these two methods. If you really wanted to know if there was any measurable difference between them (in memory consumption), you'd have to try to devise a performance test so you could measure.

I've built slideshows in the past that can display very large numbers of images and the most important thing is to make sure that as your slideshow runs, it isn't accumulating memory usage and using more and more memory. Memory usage should rise as the slideshow runs initially and then should flatten out and stop increasing because you reach a steady-state where you're releasing an older image as you load a newer image. This is somewhat difficult to measure in browsers because they also have memory caching and lazy garbage collection going on which obscures the memory actually being used by your slideshow, but if you let it run long enough with a very large number of images and it continues to go up and up forever, then you know you have a problem to fix. If it plateaus and stops going up, then you're probably good.

Upvotes: 1

abbood
abbood

Reputation: 23548

i would do something in between.. i would keep a couple of extra images in addition to those displayed within the dom.. and so whenever a user slides to the left or right.. i would simply display an image that has already been downloaded and appended to the dom (very cheap operation)..

at the same time i would remove the images that are way off from the dom and cache them into a javascript array.

that way I don't burden the DOM with way too many images (you don't know how many images a slider will contain beforehand) and at the same time i don't compromise UX by trying to manipulate too many images DOM wise

Upvotes: 1

Related Questions