Helping a Graphic-Intensive Website

[Derek0]

So, I have this website that allows the users to make a map based on placing images on ground, mask, or fringe layers. They select their "tiles" from a bunch of images, place them somewhere on a layer, and then repeat. All using JavaScript.

The problem is, when the user tries to scroll through their creation, all the images give the browser a hard time and it scrolls really slow. I guess I knew I would run into this anyway.

So, is there anything I can do to make this graphic intensive website scroll easier to the browser, other then making it less graphic intensive? Here are a few questions but if you know any other ways please post:

• If I used PNGs instead of GIFs, would it scroll faster? (I need transparency)
• If I make the div they scroll through smaller, showing less images at a time, would it scroll faster? (there will still be as many images, just not visible)
• If I changed the quality or image size of the images, would it scroll faster?
• Is there a way to tell the browser to do something different for it to scroll faster?

Thanks in Advace

P.S. Please don't tell me to do it in Flash or Java instead, I won't go into detail, but it has to be JavaScript or my whole project is pointless.

 

[enouwee]

The key is anticipation (or: prefetching).

If you understand how the AJAX version of Google Maps works, you should known what I mean.

 

[Derek0]

The key is anticipation (or: prefetching).

If you understand how the AJAX version of Google Maps works, you should known what I mean.

So, only display what's visible and fetch the images ajacent to the visible area? That could work, I should try it, thanks.

By the way, do I have to use AJAX, or can I just use innerHTML to add the images, or can I just make them there but invisible until they're needed?

 

[phyrex1an]

It sounds as you only have a limited set of images that can be combined in many different ways. Currently you do that combining on the server, sending the combined image to the browser. Eg,

<img src="/combine?images=A-B-C" alt="">

Though, you could let the browser deal with the combining making the total amount of different images to download way smaller.

<img src="A.gif" alt=""><img src="B.gif" alt=""><img src="C.gif" alt=""><!-- TODO: Invent the uber css/javascript used to stack these images -->

Might be an option if I did understand you application correctly

 

[enouwee]

By the way, do I have to use AJAX, or can I just use innerHTML to add the images, or can I just make them there but invisible until they're needed?

Well, if your client-side scripts know what to request next, you don't need AJAX and simple DOM calls (or innerHTML hacks) can do the job. But if only your server knows the data to display, you have to make AJAX calls.

 

[Derek0]

It sounds as you only have a limited set of images that can be combined in many different ways. Currently you do that combining on the server, sending the combined image to the browser.

There's a list of images, and the user can choose from them and place them on a grid in one of the three layers. Every image is 32x32 but they can be transparent. The ground layer images have a z-index of -4, mask -2, and the fringe images have a z index of 2, allowing a 3 layer effect. I'm not combining them, just placing them on the page according to the grid, with different z-indexes.

Well, if your client-side scripts know what to request next, you don't need AJAX and simple DOM calls (or innerHTML hacks) can do the job. But if only your server knows the data to display, you have to make AJAX calls.

Actually I load the images into an array at the beginning of the page, so I don't have to call MySQL as much. So yeah, I could use the DOM calls/innerHTML.

The only thing was I was making it in a fullscreen page, I guess I can't do that or it'll show too many images at once and it will be too hard to scroll. Oh well.

 

[Derek0]

I hope it's OK to revive my thread, but the adjustment to a non-fullscreen GUI isn't going so well.

I want to know if there's any way to speed up the scrolling without showing less images. I want to know if any of these work for that or if you know anything else please tell me.

• If I used PNGs instead of GIFs, would it scroll faster? (I need transparency)
• If I changed the quality or image size of the images, would it scroll faster?
• Is there a way to tell the browser to do something different for it to scroll faster?

Also:

• If I made the images 64x64 instead of 32x32, and showed 1/4th of them, would it scroll faster?
• If I viewed the page on a newer computer (better ram, processor, video card, etc.) would it scroll faster?