View Full Version : Cmotion flickers a bit (help with my implemation please)

02-26-2008, 07:10 PM
1) Script Title: CMotion Image Gallery (looping on the left and right)

2) Script URL (on DD): http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm

3) Describe problem:

All my fault for sure because the above link is working perfectly. I don't have too much hopes to get the solution since I can not show the page due to the web site is not live yet.

Basically I am experimenting a bit of jerky when the images move on the right or left in the carousel I have adapted to my site. That never happens with a static installation, that is to say, the images are 'preloaded' in the 'nobr' element.

My problem is, I am loading the 'nobr' element dynamically from using javascript 'createElement and appendChild'. I have to say, my current carousel is holding around 45 images of around 30 KB each.

When the corresponding item of the menu is chosen, then the carousel is filled up with images. I set the 'nobr' element to 'none' (Fx and Safari) and 'visibility=hidden' on IE and attach a onload event to the last image to be loaded in the div. when this event is called, them I show the images at once time.

Source Code

Thank you very much.

02-27-2008, 03:59 PM
I just would like to know if the flicker issue is:

1.- Because of I am using javascript's createElement and appendChild function to create the images into the 'trueContainer' nobr html element and the same for the nobr in the cross_scroll_1 div (I create this one also using javascript).

2.- Because of the page is bearing, for example, 90 images which means aprox from 2MB to 4 MB (2MB for the trueCotainer and 2MB fro the cross_scroll_1 div).

4.- Because of the carousel has now a 350 px of height and 1200 px of width...

If someone else has an advise for me, please let me know because I don't know what else to do .

02-27-2008, 04:44 PM
Mostly number 4. Also, the slower that it moves (the lower the top speed) the less of this flicker there should be. I don't know which browser you are using, but FF is generally the worst browser for something like this. However, as FF is so widely used, that's not really all that important in finding a solution.

Now, a little about using the DOM createElement to insert images, as long as the fillup() function is delayed until all images are loaded by the browser, this in itself should make no difference, but if it is not, the gallery won't know the true width of the image train(s).

One way around this that would still allow dynamic importation of the images, would be to use a separate document.write() script within the trueContainer element to write out the images from an array or whatever.

The problem with create and insert/append with this script would be the timing of the fillup() function, if it could be delayed until all of the individual images' onload events fired, that would be fine, or the images could be preloaded, then you could test for each one's complete property before proceeding with appending them and running fillup().

02-28-2008, 02:46 PM
Hi John,


After removing every single item from my page in order to know what was going on, I realized the problem is the opacity property I had defined for the images appearing in the carousel. In fact, the scroll_speed came down at least twice when this property was on so when I turned it off the carousel was faster and did not flicker (jerky). It seems to be Browsers aren't able to process this property properly in these cases.


Regarding what you said about keeping the fillup function till the respectives nobr to be loaded, I did, actually I attach an onload event to the last image to be loaded in the nobr element and then, what it is launched I get the actualwidth property and show the images at once time since the came one by one you could realize how them were being loaded.


Regarding browsers, I have set up the height of the carousel to 350px. For a reason I unknow, whatever browser out of IE adjust the width automatically but IE explorer still keeps the original width of images and this is what I am now working on. (Safari has a rendering problem so I have to set up seTimeout before it to ask for the current actualwidth)


Regarding width and height of the carousel, it could cause this to not be as smooth as yours though it is really going well now for Safari and acceptable for FX and probably IE. It has been a moment where my page has like 150 images preloaded (not more than 5 MB at all) but that is not causing that the carousel is not as good as yours.


Please advise if you know something else that I could for the third point (width of the pages). what I am now doing is to calculate the what the difference is between IE and the rest of browser and then I resize the pictures by using javascript but it is a homemade idea that I don't really like and the restuls are not really good.

Thank you very much for all your support and patience,


02-28-2008, 03:44 PM
If I could have a link to your page, I might be able to be of more help.

Using only the onload event of the last image though, that assumes that all other images will be loaded as well at that point, which may not always work out that way.

If you set an image's style height and do not set its style width or attribute width, virtually all modern browsers (including IE) will scale the image's width to that height. However, IE is very aggressive in evaluating an image's dimensions. Often, just creating an image will assign it the image file's true width and height attributes. Also, IE is the fastest browser I've ever seen where it comes to getting an image's dimension. It does so at or very close to the beginning of the image loading process. Depending upon your code, this can change what it does. Like if your code tests for an image's dimensions at a point where other browsers don't have them yet, but IE does, this can make a difference, depending upon what your code does with that information or the lack of it.