471,075 Members | 926 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,075 software developers and data experts.

preloading image (white page between) problem

77
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?

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script LANGUAGE="JavaScript">
  3. <!--
  4. var BackgroundChangeIndex = 0;
  5.  
  6. var wistol = new Array
  7. ("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"); 
  8.  
  9. function SetBackgroundImage()
  10. {
  11. var BackgroundImage;
  12. BackgroundChangeIndex++;
  13. if (BackgroundChangeIndex >= wistol.length)
  14. {
  15. BackgroundChangeIndex = 0;
  16. }
  17. BackgroundImage = wistol[BackgroundChangeIndex]
  18. document.body.style.cssText="background: url(" + BackgroundImage + ");" + "background-attachment: fixed; center; center;"
  19.  
  20. setTimeout("SetBackgroundImage()", 10000) 
  21.  
  22. }
  23.  
  24. //-->
  25. </script>
Expand|Select|Wrap|Line Numbers
  1. <SCRIPT language="JavaScript">
  2. <!--
  3. if (document.images)
  4. {
  5.   pic1= new Image(); 
  6.   pic1.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9886"; 
  7.  
  8.   pic2= new Image(); 
  9.   pic2.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9887"; 
  10.  
  11.   pic3= new Image(); 
  12.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9888"; 
  13. pic3= new Image(); 
  14.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9889"; 
  15. pic3= new Image(); 
  16.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9890"; 
  17. pic3= new Image(); 
  18.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9891"; 
  19. pic3= new Image(); 
  20.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9892"; 
  21. pic3= new Image(); 
  22.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9893"; 
  23. pic3= new Image(); 
  24.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9894"; 
  25. pic3= new Image(); 
  26.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9895"; 
  27. pic3= new Image(); 
  28.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9896"; 
  29. pic3= new Image(); 
  30.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9897"; 
  31. pic3= new Image(); 
  32.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9898"; 
  33. pic3= new Image(); 
  34.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9899"; 
  35. pic3= new Image(); 
  36.   pic3.src="http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9900"; 
  37. }
  38. //-->
  39. </SCRIPT>
  40.  
Nov 10 '07 #1
7 2202
Inny
77
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?
Nov 10 '07 #2
Inny
77
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? :)
Nov 12 '07 #3
Dasty
101 Expert 100+
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 ..
Nov 12 '07 #4
Inny
77
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...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
Nov 12 '07 #5
Dasty
101 Expert 100+
have set doc type to same as parent window, makes no difference...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "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.
Nov 12 '07 #6
Inny
77
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

Expand|Select|Wrap|Line Numbers
  1.  
  2. /* This script and many more are available free online at
  3. The JavaScript Source!! http://javascript.internet.com
  4.  
  5. /* -----------------------------------------------
  6.   Image Preloader - v.1.1
  7.   (c) 2007 http://www.haan.net
  8.   You may use this script but please leave the credits on top intact.
  9.   Please inform us of any improvements made.
  10.   When useful, we will add your credits.
  11. ------------------------------------------------ */
  12.  
  13. function preload() {
  14.      var brochure = new Array();
  15.      var pics = preload.arguments;
  16.      var dir = '/images/img/img_' // path to images
  17.      for (i=0;i<pics.length;i++) {
  18.           brochure[i] = new Image();
  19.           brochure[i].src = dir + pics[i] + '.jpg'; // change file extension, if necessary.
  20.          // uncomment next line for testing; click OK to continue loop and cancel to break
  21.          // if(!confirm(brochure[i].src)) break;
  22.      }
  23. }
  24.  
  25. // call the function with the list of images (unique part of names)
  26.  
  27. // Multiple onload function created by: Simon Willison
  28. // http://simon.incutio.com/archive/2004/05/26/addLoadEvent
  29. function addLoadEvent(func) {
  30.   var oldonload = window.onload;
  31.   if (typeof window.onload != 'function') {
  32.     window.onload = func;
  33.   } else {
  34.     window.onload = function() {
  35.       if (oldonload) {
  36.         oldonload();
  37.       }
  38.       func();
  39.     }
  40.   }
  41. }
  42.  
  43. addLoadEvent(function() {
  44.      preload('img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12');
  45. });
  46.  
  47.  
Nov 13 '07 #7
Dasty
101 Expert 100+
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).
Nov 13 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

22 posts views Thread by Fabian | last post: by
6 posts views Thread by michaaal | last post: by
2 posts views Thread by Stevio | last post: by
4 posts views Thread by Dennis Allen | last post: by
40 posts views Thread by Geoff Cox | last post: by
reply views Thread by Dave Harrington | last post: by
7 posts views Thread by Keith Hughitt | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.