Preloading Entire Element

Question

I have a jCarousel which loads fairly slowly. The images will display as a list first before turning into a carousel view. This also causes the other jquery scripts on the page to be delayed. I have tried preloading the images but it doesn't seem to have any effect on how fast my images turn into a carousel.
Is there any way I can ensure that my entire carousel is preloaded before it is displayed?

score 2 · Accepted Answer · answered Apr 27 '11 at 14:32

2

I use the following pattern:

var imgCount = $("#carousel img").length;
var loadCounter = 0;

$("#carousel img").one("load", function() {
    loadCounter++;
    if(loadCounter == imgCount) {

        // all images have loaded, fire up carousel
        $("#carousel").carousel();
    }
}).each(function() {
    if(this.complete) $(this).trigger("load");
});

answered Apr 27 '11 at 14:32

karim79

339,989
67
413
406

is it okay that I have `$("#carousel .classname")` does it work the same? – LostLin Apr 27 '11 at 14:46
@Ima Student - yes, the selector I used was merely an example. – karim79 Apr 27 '11 at 15:41

score 1 · Answer 2 · answered Apr 27 '11 at 14:32

1

One option could be to hide the containing div for the carousel using CSS, and then unhide it (using Javascript) just before the carousel script runs.

That way, the images will not be displayed at all until the page is ready and the script is about to execute.

answered Apr 27 '11 at 14:32

James

13,092
1
17
19

yea I was thinking of doing that but it doesn't seem like the most efficient way. – LostLin Apr 27 '11 at 14:35
If you don't hide the images first, they will be displayed on the page. If the page takes a while to load, then the user will see the images before the Javascript kicks in. There isn't really any way around it - you either change how the images are displayed without Javascript, to make them look better before the JS kicks in, or you hide the images. – James Apr 27 '11 at 14:36
I actually think the images load fine. there just a delay for them to display as a carousel – LostLin Apr 27 '11 at 14:40
Move the carousel to the top of the execution order for the Javascript on the page, then. – James Apr 27 '11 at 14:42
@jayp sorry I'm kind of n00b. what do you mean by that? – LostLin Apr 27 '11 at 14:47
If your carousel is not kicking in until after other bits of Javascript, move it so that it gets executed first - place the carousel bit above all the other Javascript. – James Apr 27 '11 at 14:49
@jayp My carousel actually is the first bit of javascript in my code. I'm trying the css way. Which jQuery code do I use to unhide my element? because I've tried `$('#div').css('display', 'block');` and my elements are still hideen – LostLin Apr 27 '11 at 15:05
I don't use jQuery - I'm sure you can look up the answer to a question like that though (here's a clue: http://api.jquery.com/toggle/). – James Apr 27 '11 at 15:10
+1 because this is good for smaller sized elements but when I tried it on my carousel it took too long to display. karim's solution loaded much faster – LostLin Apr 27 '11 at 15:29

jeroen · Answer 3 · 2011-04-27T14:39:16.140

0

I normally load stuff like slide-shows (html + images) in:

$(window).load(function() {
  // load and start slideshow when rest of page is loaded
});

That ensures that it only gets loaded when the rest of the page is completely ready (not just the DOM, but all other images are loaded as well).

Additionally you can hide the contents of the carousel and add a .load() event to each image to count how many images are loaded and display the whole thing when they are all ready. I handle that myself, but I don´t know the jCarousel plugin, perhaps it offers that functionality already.

edited Apr 27 '11 at 14:39

answered Apr 27 '11 at 14:31

jeroen

91,079
21
114
132

but thats where I have the preloader =( – LostLin Apr 27 '11 at 14:39
@Ima Student So have I; I first add the html dynamically in `$(window).load` and then attach the `.load()` event to the newly added images, similar to @karim79's code. – jeroen Apr 27 '11 at 14:43

Preloading Entire Element

3 Answers3