Hi i had a big image in my web page. I need to do a preload in that image. Actually I am new to javascript. I tried many scripts but didnt work.. Please guide me ...
Thanks
Rajeesh

Recommended Answers

All 2 Replies

Ok, here's how we do it! Just bring this up in the header section of your page...
This script will sniff out all your images and making it preloaded to your page -- you'll notice that your page loads a bit faster than the usual one...

<script type="text/javascript">
<!--
/* Essential Works(tm) 
    Preloading Images with Javascript (DEMO)  ~ */

var imgs = document.getElementsByTagName('img');
var myImages = { img : function(sRc,ref) {
thisImage = new Image(); 
thisImage.src = sRc;
if ( document.images ) {
return imgs[ref].src = thisImage.src; return true; }
else { return false; }
 } }

function preloadMyImage() {
for (var x = 0; x < imgs.length; x++) {
myImages.img(imgs[x].src,x); } }
window.onload = preloadMyImage;

//-->
</script>

shrink the image first, many people will not wait.
as long as there is a size set for the image, fake it
create a 1pixel square image and load that into the 800*600(example) image space.
put the javascript to load the image, and replace the 1px placeholder, last in the file. The page will load, be functional and then the image will change as soon as it is downloaded

<!-- most of page -->
<img src='tiny1px.jpg' id='bigpic'width='800' height='600'>
<!-- rest of page -->
</body>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
Function replaceimage() {
image1 = new Image();
image1.src = "http://pics.mysite.com/bicpic.jpg";
document.getElementByID('bigpic').src = image1.src;
}
replaceimage;
//-->
//]]>
</script>
</html>

If the image is being preloaded for a subsequent page, its easier

<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "http://pics.mysite.com/bicpic.jpg";
//-->
//]]>
</script>

on a previous page will put the image in TIF ready for a call

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.