I have a webcomic that is a large file size jpg image. This takes a long time to load on dial up modems.<br />
<br />
In order to satisfy the patience of my audience I have thought of a way that might help. I will have text on my main page with a link to the comic jpg. While the reader is reading the text, the comic is already being loaded; ready to appear instantly when the reader finishes reading the text on the main page and clicks on the link to view the comic.<br />
I hope I explained that clearly.<br />
<br />
Is it possible to do this? If so, how can it be done?<br />
<br />
You can see my comic at <!-- m --><a class="postlink" href="http://www.limdallion.com">http://www.limdallion.com</a><!-- m --><br />
<br />
P.S. You don't need to comment about other html problems it has right now.<!--content-->I've found that DHTML pre-loads an image.<br />
Look at:<br />
<!-- m --><a class="postlink" href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</a><!-- m --><!--content-->Here is an idea:<br />
<br />
set the original image width and height to small numbers (the full image will still load) and then change the image height/width later when the image as finished loading:<br />
<br />
e.g.<br />
<br />
<br />
<img src='http://www.htmlforums.com/archive/index.php/bigfile.gif' height=2 width=2 onload='this.height=800; this.width=800'><br />
<br />
<br />
Above requires a browser which can dynamically change an image after it has been written to the screen (e.g. ie4++ / ns6++)<br />
<br />
Otherwise here is another option:<br />
<br />
<br />
<script language='javascript'><br />
<!--<br />
function makeBig(){<br />
var txt = "<img src='http://www.htmlforums.com/archive/index.php/bigFile.gif' id='myImg' height=800 width=800>'";<br />
<br />
if (document.layers){<br />
var obj = document.layers["imgHolder"].document.layers["nsImgHolder"];<br />
obj.document.write(txt); obj.document.close();<br />
} else {<br />
var obj = (document.all) ? document.all["imgHolder"] : document.getElementById('imgHolder');<br />
obj.innerHTML = txt; <br />
}<br />
//--><br />
</script><br />
<br />
<div id='imgHolder' name='imgHolder' style="position: relative;"><br />
<layer name='nsImgHolder'><br />
<img src='http://www.htmlforums.com/archive/index.php/bigFile.gif' id='myImg' height=2px width=2px onload='makeBig()'><br />
<img src='http://www.htmlforums.com/archive/index.php/dummy.gif' id='blank' height=800 width=798><br />
</layer><br />
</div><br />
<br />
<br />
The 'dummy.gif' file could be a 'please wait while image loading' image, or a transparent 1x1 pixel image if you like (for faster loading)<!--content-->
<br />
In order to satisfy the patience of my audience I have thought of a way that might help. I will have text on my main page with a link to the comic jpg. While the reader is reading the text, the comic is already being loaded; ready to appear instantly when the reader finishes reading the text on the main page and clicks on the link to view the comic.<br />
I hope I explained that clearly.<br />
<br />
Is it possible to do this? If so, how can it be done?<br />
<br />
You can see my comic at <!-- m --><a class="postlink" href="http://www.limdallion.com">http://www.limdallion.com</a><!-- m --><br />
<br />
P.S. You don't need to comment about other html problems it has right now.<!--content-->I've found that DHTML pre-loads an image.<br />
Look at:<br />
<!-- m --><a class="postlink" href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</a><!-- m --><!--content-->Here is an idea:<br />
<br />
set the original image width and height to small numbers (the full image will still load) and then change the image height/width later when the image as finished loading:<br />
<br />
e.g.<br />
<br />
<br />
<img src='http://www.htmlforums.com/archive/index.php/bigfile.gif' height=2 width=2 onload='this.height=800; this.width=800'><br />
<br />
<br />
Above requires a browser which can dynamically change an image after it has been written to the screen (e.g. ie4++ / ns6++)<br />
<br />
Otherwise here is another option:<br />
<br />
<br />
<script language='javascript'><br />
<!--<br />
function makeBig(){<br />
var txt = "<img src='http://www.htmlforums.com/archive/index.php/bigFile.gif' id='myImg' height=800 width=800>'";<br />
<br />
if (document.layers){<br />
var obj = document.layers["imgHolder"].document.layers["nsImgHolder"];<br />
obj.document.write(txt); obj.document.close();<br />
} else {<br />
var obj = (document.all) ? document.all["imgHolder"] : document.getElementById('imgHolder');<br />
obj.innerHTML = txt; <br />
}<br />
//--><br />
</script><br />
<br />
<div id='imgHolder' name='imgHolder' style="position: relative;"><br />
<layer name='nsImgHolder'><br />
<img src='http://www.htmlforums.com/archive/index.php/bigFile.gif' id='myImg' height=2px width=2px onload='makeBig()'><br />
<img src='http://www.htmlforums.com/archive/index.php/dummy.gif' id='blank' height=800 width=798><br />
</layer><br />
</div><br />
<br />
<br />
The 'dummy.gif' file could be a 'please wait while image loading' image, or a transparent 1x1 pixel image if you like (for faster loading)<!--content-->