preloading image (white page between) problem

[Inny]

Hello again, Im using the code below in a child page (popup), the images
are called from the parent page. When the changer is running, the child page goes white between images. I realise this is happening because the Images are not cached (yet) on the users browser.
I tried preloading images with the 2nd code below in the childpage head
and in the parent page head and both. no joy, dosent seem to actually 'preload' the pics. (i also gave definitions by adding width & height attributes but no difference. Is there anyway to solve this problem?

preveiw (click yellow highlighted link 'Pre-view active topics' near top)
note: first image (green python) is the childpage body BG (css)
In previous Instance of the changer code, links were called from photobucket.com, at that point, the images were cacheing after loading (so after the full cycle 15 pics there was no white between), I though calling the pics from the same domain would be better but now it dosent cache at all.
notice pics are attachments in the parent page, is that why no cache?

http://herproom.5.forumer.com/index.php?

 
<script LANGUAGE="JavaScript">
<!--
var BackgroundChangeIndex = 0;
 
var wistol = new Array
("http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9886", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9887", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9888", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9889", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9890", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9891", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9892", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9893", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9894", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9895", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9896", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9897", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9898", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9899", "http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9900"); 
 
function SetBackgroundImage()
{
var BackgroundImage;
BackgroundChangeIndex++;
if (BackgroundChangeIndex >= wistol.length)
{
BackgroundChangeIndex = 0;
}
BackgroundImage = wistol[BackgroundChangeIndex]
document.body.style.cssText="background: url(" + BackgroundImage + ");" + "background-attachment: fixed; center; center;"
 
setTimeout("SetBackgroundImage()", 10000) 
 
}
 
//-->
</script>

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
  pic1= new Image(); 
  pic1.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9886"; 
 
  pic2= new Image(); 
  pic2.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9887"; 
 
  pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9888"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9889"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9890"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9891"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9892"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9893"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9894"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9895"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9896"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9897"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9898"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9899"; 
pic3= new Image(); 
  pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9900"; 
}
//-->
</SCRIPT>
 

[Inny]

Edit: I have replaced Images in the changer script to call offsite links (photobucket) and confirmed that images cache on the users browser After the full 15 pic cycle has run. (current state).
Is there anyway to avoid the white flicker Immediately?

[Inny]

Edit: I have replaced Images in the changer script to call offsite links (photobucket) and confirmed that images cache on the users browser After the full 15 pic cycle has run. (current state).
Is there anyway to avoid the white flicker Immediately?

Any help with this one folks? :)

[Dasty]

1) check the document content-type of page that you are loading into new window:
http://herproom.5.forumer.com/index....e=post&id=9817
It's not ok for sure ... (try FF / Opera)

2) it's a new window, and you are not caching all images in child window again. It's fine that your browser got all images cached, but if your browser got image cached does not mean that browser does not communicate with server at all. But browsers is sometimes sending "checking packet" to server to check if browser is holding up-to-date image (depend on more settings - and cache control). Which may result into little white blink.

Well, if all images are already cached in parent window, you can call pre-caching in children window again (it will not result in loading all images again, but it will pre-do all "checking packets".

Try fix 1) and 2) ... they may cause the problem.

Btw, dont forget "sometimes, less is more" - especially when we are talking about large images that are used just as background. Not all users got fast internet connections.

My 2 cents ..

[Inny]

1) check the document content-type of page that you are loading into new window:
http://herproom.5.forumer.com/index....e=post&id=9817
It's not ok for sure ... (try FF / Opera)

2) it's a new window, and you are not caching all images in child window again. It's fine that your browser got all images cached, but if your browser got image cached does not mean that browser does not communicate with server at all. But browsers is sometimes sending "checking packet" to server to check if browser is holding up-to-date image (depend on more settings - and cache control). Which may result into little white blink.

Well, if all images are already cached in parent window, you can call pre-caching in children window again (it will not result in loading all images again, but it will pre-do all "checking packets".

Try fix 1) and 2) ... they may cause the problem.

Btw, dont forget "sometimes, less is more" - especially when we are talking about large images that are used just as background. Not all users got fast internet connections.

My 2 cents ..

have set doc type to same as parent window, makes no difference...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

[Dasty]

have set doc type to same as parent window, makes no difference...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Content type is text/plain, which it shouldn't (and is a big issue)

But as I said in 2) try to precache all images in popup window. You are not pre-caching them there.

[Inny]

Content type is text/plain, which it shouldn't (and is a big issue)

But as I said in 2) try to precache all images in popup window. You are not pre-caching them there.

I have no idea what your saying about content type. Im a newby and your way too vague im afraid.
As for precacheing I did that before (popup window) with the script above, even changed it to use direct urls from photobucket, it seemed to make no difference.

Maybe this precache script below will work better. Please show me how to
use this with urls like this

http://i14.photobucket.com/albums/a345/Instar/Site%20related%20pics%20herpersanon/turtles.jpg

 
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
 
/* -----------------------------------------------
  Image Preloader - v.1.1
  (c) 2007 http://www.haan.net
  You may use this script but please leave the credits on top intact.
  Please inform us of any improvements made.
  When useful, we will add your credits.
------------------------------------------------ */
 
function preload() {
     var brochure = new Array();
     var pics = preload.arguments;
     var dir = '/images/img/img_' // path to images
     for (i=0;i<pics.length;i++) {
          brochure[i] = new Image();
          brochure[i].src = dir + pics[i] + '.jpg'; // change file extension, if necessary.
         // uncomment next line for testing; click OK to continue loop and cancel to break
         // if(!confirm(brochure[i].src)) break;
     }
}
 
// call the function with the list of images (unique part of names)
 
// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
 
addLoadEvent(function() {
     preload('img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12');
});
 
 

[Dasty]

Sorry that I was not clear (my english is not very good as you noticed).

But about pre-caching:

You are loading page http://herproom.5.forumer.com/index....e=post&id=9817 into your pop-up window. There is one array called "wistol" where you got stored all image paths. But as I said, you are not preloading images in that pop-up window. (You said that you preloaded them in parent window - didnt check it, since parent document is huge and got many external includes). But it MAY be not enought. You have to run your preload image function in your popup window again (what you are not doing in current version), so the browsers will not check if pictures in its cache are not out of date (sending checking packet to server). So simply ... add your preload_images code to popup window too (not only in parent window) and check if white-blinking is still the same.

And about document content-type:

When you are requesting page from the server, server will send you "some data". But how can client browser know what type of data is it getting? Well, you can not use file extension. Type of document is stored in header of response you get, which tells browser what type of data is it recieveing. So, if we are talking about html pages, content-type of the document int the header should be "text/html" (so browser will interpret it as html page), but your responses got "text/plain" content-type, so some browsers dont know that it is html page and will just show source code of the page (becaue they think it's just plain text file). (You can test it in FF, it is quite strict in handling content-types)

Default content type settings are at you web server, but you can overload them in your php/aspx pages. (for example "header('Content-Type: application/pdf');" in php).