View Full Version : Incredible problem: web-server cannot load image from another domain.

05-01-2004, 03:57 PM
Hi all,
I came across really strange thing, while trying to host my web-page.
The core of the problem is: browser (or web-server) cannot load an image to html-page, if the image resides on another domain (different from html-page).
So, if you go to http://www.users.bigpond.net.au/rroz/test/test1.html , you'll probably get a page with no image on it, as I did.

The image (all the page has) is described as

<img name="Fujiama" border="0" src="http://www.geocities.com/rroz123/images/gallery/g14/g14_12.jpg" width="248" height="227" alt="Fuijiama Mountain">

No problems should be, but they're - instead of picture of Fuji I can see an image placeholder only.

To verify the things, image itself exist - by placing http://www.geocities.com/rroz123/images/gallery/g14/g14_12.jpg
in the browser you'll see the Fuji.

OK, this was simple test1.html - no Javascript at all.
Now, after looking at the existing solutions & possible problems - I implemented 3 (three !) different solutions, none of them helped.

1) Solution 1 (file test2.html - under the same domain http://www.users.bigpond.net.au/rroz/test/test2.html - you can view all test files on-line here) - according Macromedia:

function MM_preloadImages() { // ver 3.01

if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray == null) {
document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) {
for (var j = 0; j < imgFiles.length; j++) {
if (imgFiles[j].charAt(0) != "#") {
document.preloadArray[i] = new Image();
document.preloadArray[i++].src = imgFiles[j];

} // end MM_preloadImages()

// -->


<body bgcolor="#FFFFFF" leftmargin="5" topmargin="4" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('http://www.geocities.com/rroz123/images/gallery/g14/g14_12.jpg','#931560371110');">

Solution 2) Macromedia again - older version of preload()

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image(); d.MM_p[j++].src=a[i];}}
// -->


<body bgcolor="#FFFFFF" leftmargin="5" topmargin="4" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('http://www.geocities.com/rroz123/images/gallery/g14/g14_12.jpg','#931560371110');">

3) My solution

// preload images src into arg[]
var d = document;
var arg = new Array();
arg[0] = "http://www.geocities.com/rroz123/images/gallery/g14/g14_12.jpg";

d.a = new Array();

for ( var i = 0; i < arg.length; i++ ) {

d.a[i] = new Image();
d.a[i].src = arg[i];


// set delay and start load preload images, otherwise d.images is not accesible yet
var delay = 200;
setTimeout("use_preload_images()", delay);

function use_preload_images() {

if ( d.images ) { // if images

for ( var i = 0; i < arg.length; i++ ) { // for i

d.images[i].src = d.a[i].src;

} // end for i

} // end if images

} // end use_preload_images()

Doesn't work. Incredible...

Interesting thing is, that if you "Save as" html a web-page - you'll get a correct one - with image.

Also, by opening test pages localy (from hard disk) - I able to see the images.

With solution 3) - I even can see image from the web-server - but only in the first time (& not always) - when trying to click "refresh" - it dissapears.

OK, what are possible problems?

- sequence of events: initial Javascript execution, images load, document load, execution of Preload_Images() is not clear & can cause confusion

- but I cannot assign to document.images[i].src untill images are actually loaded

- call Preload_Images() in <body onLoad=" is too late

- I'm sitting on broadband , and maybe page is loading locally too quick - picture will be different , if page is accessed by user from USA , for example.

So maybe, manipulation with delay in setTimeout() can give some results - but it's not universal solution - ideally it should work for any browser & domain, regardless of internet speed

I will try my best to solve this tricky problem, but any positive ideas will be appretiated, but I cannot even formulate - whether it Javascript of ISP problem.

Mr J
05-02-2004, 12:21 AM
I went to your test page and the image loaded ok

05-02-2004, 11:42 AM
Hi, Mr J
What page have you tested exactly (I have 4 of them) ?

Have you tried to press "refresh" button of your browser, while on the page ?
If not, try to do so.

05-02-2004, 12:15 PM
I doubt geocities allows direct linking, it would sort of be counter productive for their add income.

Mr J
05-02-2004, 03:09 PM
I went to


I have just been again and the image did not load this time so I enter


in the address bar and the image loaded into the window, I press my back button and the image appeared on the first page this time.

This forum is showing the image address prefixed with http://

I just used from the w w w .geocities.com/rroz123/images/gallery/g14/g14_12.jpg

I have put spaces between the w's so this forum does not add the http://

I should try it without and see what happens

05-02-2004, 04:50 PM
The core of the problem is: browser (or web-server) cannot load an image to html-page, if the image resides on another domain (different from html-page).

There are many webhosts who do not allow remote linking of images. If you want to show the image on your site, get permission from the Geocities siteowner to download the image and then upload it directly to your webhosting area.

Incidentally, Geocities has some sort of limit to the number of times each site is accessed (or possibly it's amount of data being exchanged) Once the limit is reached, the site is inaccessible for a period of time. Perhaps this is what is occurring.

Whatever the case, your best bet is to have the image in your own webdirectory rather than calling it from a remote location.

05-09-2004, 09:04 AM
Hi all,

Thanks for your responses.

I have rectified the problem.

There are 2 aspects of it:

1) Geocities (as well rest of free hosters) don't allow to do remote image linking - but I was trying to use exactly this technique (I was usin g it just because of space limitations for my web-site). Now I see - it's impossible I simply found a free hostage with 20 Mb allowed, which would solve my problems

2) During this exercise I have done a tremendous research and development in area of image preload, Javascript delay execution, speeding up of page loading, how sequence of events depends from speed of Internet connection and I end up with some quit significant results & solutions on the matter.

One of the most interesting facts (which I ever came across) was a necessity to slow down execution of Javascript (because I was creating pages on the fly, but not all images and Javascripts on the page has been loaded yet - and it was causing problems).

I need to use following delay() function
// ------------------------------------------------------------------
function delay() {

N = 10000;
var s = 0;
for (var i = 0; i < N; i++ ) {
s = 1*s + 1*i*i/i*i/i*i/i*i/i*i/i*i/i*i/i*i;

return s;
} // end delay()

useless on itself, but working like a sleep(), eating CPU and delaying script execution.

I cannot beleive, that it will ever necessary to use such things (usually the aim is to speed up execution), but reality is opposite.

I will submit final solution and its location, once it will be fully ready & tested.

Mr J
05-09-2004, 09:09 AM
Why not use an image preloader and onload event?