View Full Version : Conveyor Belt slideshow script being buggy?

06-04-2012, 09:08 PM
1) Script Title:
Conveyor Belt slideshow script
2) Script URL (on DD):
3) Describe problem:

Okay, so the script was working fine, smooth, beautifully. And then, I added an animated GIF as one of the pictures, as well as a few pictures that were of different widths than the others. Now, the slideshow is not moving smoothly, is moving a lot slower, and it is quite distracting from the images themselves.

Seems to be a little less bugged out when using Firefox to view the webpage, but it is still noticeable.

Is this problem most likely caused by the GIFs, or the images with different widths?

Thanks for your advice

06-04-2012, 09:36 PM
Most likely animated GIF.

06-04-2012, 10:42 PM
We could check if you provide a link to your page.

GIFs load very slowly the first time they play. They load one frame at a time, and that can often make it very slow. After that, they will play back at normal speed.
Alternatively, it could just be a very low quality GIF with a low framerate or bad format so that it looks bad-- not uncommon with GIFs. The fact that they can be animated is nice, but the quality is awful. Probably one of the worst formats every invented because the low quality defeats the purpose of having animation. But as the only image format that can do that, they still are useful sometimes...

06-06-2012, 04:51 PM
here's the link;


thanks for your replies guys, much appreciated

06-06-2012, 05:30 PM
Looks OK to me, takes awhile to load though.


Opera 11.64

Firefox 12

IE 9 in both IE 9 and IE 8 modes

Could be a CPU speed thing. I bet if you had a number of browsers all open to it at the same time, that could degrade the performance in some or all of them. And if the CPU is relatively slow, that could happen in some browsers even if they were the only application open and only to that page.

I have an average machine I suppose, 2.3 GHz 4 gig memory

06-06-2012, 06:00 PM
You need to optimize your graphics. That page is kinda crazy. In terms of design, I'd strongly suggest on cutting back on so much stuff, especially the overlapping backgrounds.

You should look at saving lower quality JPGs of all of your images. You can probably cut the overall page's media file size in half.

Some examples:
1. The cloud background is 150kb. When I opened it to resave as a JPG in Photoshop, the default gave me 75kb. And it looks fine. And why is your image so huge [dimensions]? I'd suggest making it a little smaller (or a lot smaller). Secondly, look into tiling. If you just want clouds, you could do that with a repeating pattern (and a much smaller image) rather than one giant sky picture.

2. You can easily cut down the filesize the book covers themselves by at least half, probably more. For example, one of them was 38kb and I cut it to 6kb without losing any visible quality. They're just thumbnails, so focus on low filesize not high quality. If you want to load higher quality ones when you click them, that's perfectly fine of course.

3. Your big animated gif banner is a serious problem. It's 1.2mb. That ridiculous for any graphic on a website, except perhaps embedded audio or video. To solve this, here are some strong suggestions:
1) Use slicing techniques to split the image into parts. There is NO reason to have the entire image as an animated gif when only two sections (the bottom flap and the right bit with the face) move. Split most of the image into a much smaller JPG file and leave a slice for the face and another for the flapping bottom.
2) Why does the bottom need to flap? The page is already overwhelming to my eyes, and that's not adding any content or even any visual appeal I don't think. It just takes up space. I see the motivation for the face, but not for the flapping.
3) Optional: If you were to remove the face from the background (modifying it a little) you could create an animated gif with many fewer colors and thus a smaller filesize. Make it transparent and put it on top of the background. You'd probably lose the animated glowing effect, but you could keep that as part of the background.
4) For the animated parts, those are obviously optional. Being clever about how you design the page would allow you to load those last, after perhaps having placeholders there in the first place for the initial load. So your page would load immediately with all of the content, and then slowly the animated elements would appear over the next 5 seconds. No problem.

Now if these changes don't help enough, you need to look into some sort of media management system (a term I've just decided to make up-- I'll explain).
For example, Flash would allow you to decide which elements load first. I usually recommend against whole-site Flash websites, but clearly here you want the entire site to be graphics, so it seems like, if that's a requirement, Flash wouldn't necessarily be a bad idea. It's not compatible with all computers (so maybe you'd want an HTML backup-- including for iPhones/iPads), but it will work with most.
Another option is to use Javascript to sequentially load parts, including saving the animation for last.
But even easier than all of that, you can use background colors (or low resolution background images) to have placeholders on the page until the other graphics load. This will negate the effect of waiting for things to load.

Finally, if you want to improve the site overall, look at reducing the heaviness of the graphics. I know, many designers like having very flashy busy sites, but if you take a step back (or visit other websites) you'll realize that it can be annoying for visitors. It's just too busy. Look at minimalist websites like google or even in some ways facebook. Less can be more.
For example, I promise you'd lose very little if you replaced your image 'buttons' with text links, with the right CSS formatting and a font of your choice.