Weird CSS Image Loading Issue: jCarousel?

Hey everyone,
I have a rather bizarre issue that I am faced with towards the development of a website that I am working on:
http://bit.ly/aUCnas

On the homepage, the first time you load the page it will display fine, but if you click on another page and then click back to the homepage, it loads all of the list items in the jQuery scroller underneath one another like so:

I managed to get this with a quick screen capture, and if you see it while browsing the site it will display for a second as it loads and then fix itself. Why would it display fine on the the first page load but not on the page refresh?

(I am using Firefox 3.6 on Mac and the jQuery plugin that I am using for the homepage is called jCarousel.)

Any help is greatly appreciated…
Thanks!

Hi,

I’m seeing a jump on first page load as well which is what I have come to expect from all these jquery hide and shows. The initial state is usually visible so that the elements are displayed in case js isn’t present and then they get switched off once they find js is supported.

You could try adding dimensions to the images in the slideshow to help the browser allocate the correct space (you should always do this for images anyway) but I don;t think it will make much of a difference here.

The only solution would be to turn the element off with css and then turn it back on with js when the page is loaded but then you lose accessibility if js is disabled. However there are some solutions to this and you can find more info here.

Oh I see… Thank you for the helpful post.
Could you explain to me why the list displays this way at first and then fixes itself soon after? Is it strictly JavaScript that is doing this or can CSS alone fix this for me too? I am hoping to avoid a complex JS work arounds like that one if at all possible, because it makes the site feel off and different when loading. Hmmm, I guess the only way to describe it is that it kind of feels sluggish when an element won’t load until everything else is done loading.

Hope that makes sense…
Thanks!

The problem is that JavaScript cannot act on the webpage until all the elements are loaded and exist on the page. This is what document ready is supposed to wait for but the problem is that as elements are loading and being cached they take longer on the first visit to load and so you see the page elements before JS is activated to hide them.

If you turn js off and refresh your page you will see what users with js will see and that is that all those images are stacked vertically down the page.

As you are using jquery you could use this method to hide the whole page until ready.

e.g.
Move jquery high up in the head of the document above the other scripts and css and then add this code.


<script type="text/javascript" src="http://dev.corelearningresources.com/inc/js/jquery-1.4.2.min.js"></script>

[B]<script type="text/javascript">
<!--//--><![CDATA[//><!--

$('HTML').addClass('JS');  

//--><!]]>
</script>

<style type="text/css">
.JS body{display:none}
</style>[/B]


Then at the end of html:


</div>
<!-- /#container -->
[B]<script type="text/javascript">
 <!--//--><![CDATA[//><!--
$('HTML').removeClass('JS');  
//--><!]]>
</script>[/B]
</body>
</html>

There are probably better methods around but JS isn’t my area:)

Paul, no need to hide the page. I see a few things that are probably causing this.

one thing I see is that you have over 1MB of scripts to download for the page to render. Since javascript can’t be loaded in parallel it may be causing sluggishness.

One thing I would suggest is using a CDN for jquery. Chances are users will already have it cached in their browsers coming from google as opposed to coming from your site. That will be less load on your servers and will allow other scripts to start downloading.

I believe jCarousel has a CDN version as well.

Since your ckeditor is not needed on the home page, why have it loading 321K when it’s not being used here? I would only load on the pages it’s used. Doing these two things will help your page load a lot faster and may fix the jCarousel load issue.

Also since jCarousel is not the primary focus at the time of page load I might try putting that script (and any other script you can without breaking your page) at the bottom of the page as the last thing loaded. That way your page will at least show signs of something being there without having to wait for all the scripts.

I would also suggest downloading firebug and the YSlow and PageSpeed add ons. This will grade your page and tell you where you can improve to make things faster.

Hi there! I found a very small simple solution for this load page error on refreshing.

I suppose you have a IMG with a WIDTH and HEIGHT on your CSS, well, the problem is the HEIGHT if you set: height: 0; in your CSS the problem is resolved.

Ok you just put this simple code of jquery for replacing the missing height:

jQuery(document).ready(function(){
$(“.YOURCLASS_CONTAINER_IMAGE”).css({height: “120px”});
});

NOTE for jQuery:
.YOURCLASS_CONTAINER_IMAGE = change with your class or ID of the elements in your slider

height “120px” = change with the correct height

Tell me if this solution work, thanks!:wink: