I-frame alternative?

[sssweb]

I've designed a somewhat graphics-heavy template page, and want to display a variety of text pages against the same graphics background. I was thinking to display the text pages in an i-frame on the template page, but would rather avoid the frames issues if possible.

Is there an easy way to show a number of text pages w/o having to re-load the same graphics over & over?

[tedster]

1. You can call the exact same file (same path) on every page. Almost all your visitors will have the file in their cache after the first page and it will load very fast.

2. Depending on how many variations of the text you want to use, if it's not a whole lot you could use a show/hide divs JavaScript method. However, this means every "page" is actually the same URL and that can get confusing pretty fast so be cautious with that approach.

[sssweb]

Re #1: Yes, I know the images will be in cache and load fast; just seems that since it's the exact same graphics every time, the most efficient way would be to use a single page and have the text content rotate through it. I considered SSI, but even that is re-loaded with every page I think.

Re #2: That might work. I assume there's no limit to the number of text pages I could display this way? But, one of the reasons I'm considering i-frames is that they let me create simple text files for each content block. Seems like the JS method means coding all the text on the one page. Or can I do it with external files?

The page URL issue is something I already accepted anyway -- it happens w/the I-frame method too; it shouldn't be a problem in my case.

[rocknbil]

Why can't you do

body { background:url(/images/my-bg.jpg); }

... or some other element BG? It will cache only the first time and remain persistent.

[sssweb]

I am using the images as background elements. But I don't see how that solves the problem of loading different text blocks w/o having to re-load the background image.

[tedster]

You're right, it doesn't. However, keeping one URL creates so many other issues - such as users not being able to bookmark a specific bit of content, or search engines not being able to focus on just one "page" - that in my view, any advantage of not loading the graphics from the cache is completely overshadowed.

The only time I would consider such a configuration would be for a stand-alone kiosk application.

[sssweb]

Yes, normally I'd agree, but I don't anticipate most of my traffic coming via search engines, and I hope to set up an internal navigation system that handles bookmark issues, etc.

[sssweb]

Hmmm...now you got me looking closer at other sites. When you click a link here at webmasterworld, for example, the header image/text doesn't (always) re-load; usually just the changing bottom content loads. That's the effect I want. How do I do that? I don't see anything in the source code that keeps the header constant while the other part changes.

A lot of other sites do this too, usually for 'branding'. The only difference on my site is that instead of a constant header, I want a constant background pic, with the changing text overlaying it. Can it be done w/o a transparent i-frame?

[tedster]

There's nothing special in the HTML that achieves this result. I think the effect you're describing comes from a modern browser, a good web connection and proper 304 responses from the server for image files that haven't changed.

[sssweb]

How about this idea for doing the whole thing on a single webpage:

1. Set the background image position to "fixed" via CSS.

2. Configure my text in 1-page 'blocks' (sections) & float it over the image.

3. At the end of each text block is a "next" link, which goes to <a name="..."> bookmarks on the page.

So the user is just scrolling down the page, section by section.

I assume I can hide the text above & below the section I want displayed. Any suggestions for doing this?

[sssweb]

This seems to work. I contained the text block using CSS "overflow". Each "page" can be bookmarked because of the #page at the end of the URL. Plus, there are no cross-browser issues like with I-frames.

Anyone see a reason not to go this route?

[zabalex]

Hi,
It really do not matter if the same image being loaded many times from the many urls whenever the image location is same. Only first time it will load and if there is no change in the image or its location the browser will render the image from your cache. So if you are making n number of pages calling the same Image from the same location the image will not load every time the user visits another page.

regards
zabalex