|
JavaScript - Preloading Images
Hey, this is my first post on this forum, just wanted to say HI!
Anyways though, here's my dilemma: I have a website with a large banner (241kb). Instead of having the website look bad while the banner (and other images) load, I would like to have a blank page that says "loading" while JavaScript preloads the banner (and other images). Upon completion of the preload, I would like to change document.location. Would something like the following work for such a task? :: Code: image1 = new Image();
image1.onLoad() = imageLoaded();
image1.src = "image1.png";
function imageLoaded()
{
document.location="index2.html";
}
How would I use this image in the next page (index2.html) ? Would I have to implement the image with JavaScript, or could I use HTML? Any comments are appreciated! Thank you Similar TutorialsI was trying to find a way to preload images using javascript or PHP or anything that would work - specifically I wanted a way to preload all images from a directory AND its sub-directories. Well, there are solutions out there and some are pretty complex. In the end I chose to do a simple thing which works well for particular image-heavy pages. It is so easy I am wondering why it isn't more often mentioned. OK, it's simply including on a chosen "lead-in" page some almost invisible inline frames (1 px x 1px) of the image-heavy pages you want to preload the images from: Code: <iframe name="I1" src="index1.html" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="1" height="1"> </iframe> <iframe name="I2" src="index1b.html" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="1" height="1"> </iframe> etc. Sure, you have to stay long enough on the lead-in page, but even if you don't, its a help. Here is my solution in action: http://maraboni.aapress.com.au/html/...y/gallery.html (my site went down just as I posted! but it'll be on in a short while, I hope!) You can see that I have used a nice bouncing ball loader routine (pace.js) top right to partially alert the user to what is going on, but it is not essential. Without the inline frames, clicking on the nav links at the top of the page will usually result in a less than optimum visual experience and a necessary page reload of the image-heavy pages. I can't see any downside. Can anyone? I have a page with several javascript (.js files) in the header, is it possible to preload all of these before the actual page content is loaded? I want to hide the javascript execution from taking place after the page has loaded. Any ideas? Thanks! Hi. I'm using lightbox on my site and i love it! However, i have one problem that occurs for people with a slow internet connection. If an image link is clicked on (that would normally be handled by the Lightbox script) before the page has finished loading, the image opens in a new tab instead of being handled by lightbox. If I were to put the lightbox scripts into the header of my main page (even though there are no images that use it there), would the browsers cache it for use when the user reaches the pages containing my images? Thanks for your time, -Scott Hi! i am working on a facebook like photo viewer. I have used javascript to declare an array of about 200 images. I have the following approach to pre-load the images. I preload all the images when the page loads: HTML: <body onload = "lodpic()"> JAVASCRIPT: function lodpic() { for(i=0; i<=199; i++) { LODImage = new Image(); LODImage.src = picture[i]; } } The problem is the page tries to load all the images when opened. And when the user clicks "next" to view other photos, the other photo is still loading where as some are already loaded. I would like the code to be able to load the photo that the user is currently viewing as the user gets to that picture, before the page tries to finish loading all the photos. In other words, if the user wants to view a particular photo directly, that photo should get the priority of loading quickly. Or if there are other approaches, it would be really helpful. Thank you! Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Please help have a look at the scripts... Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding... Please do tell me if you know the answer to it. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
}
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
var o = 100;
var t;
var p = 0;
var f = 1;
function nextImageFading(){
t = setInterval(
function(){
pic.src = img[p];
pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;
if(o<=0){
clearInterval(t);
if(p<img.length-1){
p = p+1;
}
else {p=0;}
pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;
o = 100;
}
},f);
}
</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>
Good afternoon I am trying to make a form and keep getting stuck on one thing, don't know if JavaScript is the way to go so any advise would be helpful. basicly i have a form giftcert.html -that has text input boxes the user fills in and a link to the next page for the user to pick a gift card giftcards.asp -the user picks a gift card by radio buttons (over 100)grouped by name and then pushes a button to take them to the next page passing the value of the radio and image (here is the issue) giftcert.asp -this page displays the text boxes from the first page with the value already present (used asp to achieve) and the value of the radio button (a stock number - used asp to achieve) and i want a sample of the image attached to the stock number. how do i pass the image attached to the radio button from giftcards.asp to giftcert.asp i don't know where i am going wrong a) how do i attach the image to the button do i use an onclick="pass src" and how b) how do i get the image to show up in giftcert.asp if the elements have name attributes with the same value, according to legacy DOM, it will return an array of those elements if you access the name property of 'document'. However, this doesn't apply to img elements. If the HTML code is as follows: Code: <img src="img/a.jpg" name="pic" /><img src="img/b.jpg" name="pic" /> <form name="pic">a</form> <form name="pic">b</form> then document.forms["pic"] (return an array) <-- as expected document["pic"] or document.pic (return an array) <-- as expected document.images["pic"] : in IE -- it returns the last image in FF -- it returns the first image ~~OMG~~ any idea? thx in advance. hi all, i wanna make a 3d cube made of images (like this one: http://www.petitpub.com/labs/media/flash/3dcube/). it should rotate by itself randomly in various directions and stop on demand. does anyone know where to find a prototype or tutorial for that? thanx, Hi, I'm trying to put a script in my code which when an image is clicked in the webpage, i'd like it to go through the array from index 0,1,2,3, displaying the images as the current picture is clicked. Once at the end of the array, i'd like it to return to the first index (0) and do the same again. In effect, i'm trying to create a gallery of images for users to click through. I have this code, now it loads up fine, the first image loads, when I click the image, the image in index[1] loads, but when clicked again, it returns to index[0] then the same happens over and over. My code: Code: <script type="text/javascript">
var myImages = new Array()
myImages[0] = 'images/homePic.png';
myImages[1] = 'images/pinkWall.png';
myImages[2] = 'images/wendy.png';
myImages[3] = 'images/horizon.png';
function imgChange(that)
{
var index = 0;
while (that.src.indexOf(myImages[index]) != -1)
{
myImages[index] = myImages[index++];
}
that.src = myImages[index];
return false;
}
</script>
HTML: Code: <img src="images/homePic.png" id="pic" alt="homePic" name="bGarden" height="344px" width="490px" onclick="return imgChange(this)" /> Any advice will be greatly appreciated, thank you. Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script: Code: <!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
Where does the index come from? And how do I interpret images[index] if I were to read it out loud? I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks! Hi, I have buttons like these: PHP Code: <button type="button" onclick="izdas()">Iždas</button> <button type="button" onclick="miestas()">Miestas</button> <button type="button" onclick="map()">Žemėlapis</button> <button type="button" onclick="infantry()">Kariuomenė</button> <button type="button" onclick="biuld()">Statiniai</button> How I can add images on them?? Size would be 100x20px. Also, I would e thankful if someone would help me position them in one vertical line. Thanks in advance... Hi i have created a scrolling gallery using javascript but i am having trouble aligning my images. right now they are in the center of the page but at the bottom, but i want them on top of the page. here is my code. <html> <head> <title>Gallery</title> <link href="website.css" rel="stylesheet" type="text/css"> <left> <table border="0" width="50" height="200"> <tr><td><a href="unique sports.html"><img width="400" height="230" align="center" src="unique sports logo.gif" border="0"></td></tr> <tr><td><a href="unique sports.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/home button.gif" border="0"><a/></td></tr> <tr><td><a href="about us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/about us.gif" border="0"></a> </td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/reviews.gif" border="0"></a> </td></tr> <tr><td><a href="Contact us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/contact us button.gif" border="0"></a></td></tr> </td></tr> <tr><td><a href="shop section.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/shop section .gif" border="0"></td></tr> <tr><td><a/><a href="http://google.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/latest news .gif" border="0"></a></td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/photo gallery .gif" border="0"></a></td></tr> </table> <center> <table> <td> <script language="JavaScript1.2"> var scrollerwidth='500px' var scrollerheight='500px' var pausebetweenimages=3000 var slideimages=new Array() slideimages[0]='<img src="72757631_9c35b8eff2_o.jpg">' slideimages[1]='<img src="363507907_FEDxk-L.jpg">' slideimages[2]='<img src="2542265127_6108971aa4.jpg">' slideimages[3]='<img src="2795508357_66b1cea812.jpg">' var ie=document.all var dom=document.getElementById if (slideimages.length>2) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",50) } else{ tlayer.top=parseInt(scrollerheight) tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",50) } else{ tlayer2.top=parseInt(scrollerheight) tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2_obj)",pausebetweenimages) return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("move3(tdiv)",50) } else{ tdiv.style.top=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2_obj)",pausebetweenimages) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("move4(second2_obj)",50) } else{ tdiv2.style.top=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (ie||dom){ first2_obj=ie? first2 : document.getElementById("first2") second2_obj=ie? second2 : document.getElementById("second2") move3(first2_obj) second2_obj.style.top=scrollerheight second2_obj.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=parseInt(scrollerheight)+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">') document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } </script> </td> </tr> </table> </head> <body> </body> </html> Thank you I tried to use the CSS Horizontal List Menu from http://www.javascriptkit.com/script/...stopmenu.shtml, and it is working with the one exception of the three images not showing up. I did did save them to the directory that contains the page I pasted the scripts to, and all of the links are showing in plan test only. I placed them original in a sub-folder call graphics which is the folder I have all of the graphics in. I also place them in the root director that has all of the HTML fiiles.
Folks I'm so in the dark about this that I couldn't even think of a sensible title for the thread! One of my colleagues reckons that some years ago she worked on a website that contained images that were set to be visible to users only between certain dates (different dates for different images, so an image representing January would be visible only during January, and so on). Does this sound like something familiar? If so, would it be done using Javascript? Thanks Remster Hi! I've seen several sites that use what looks like the alert function (I know it isn't), where the site gets darkened and a popup box (similar to that of the alert one) comes up and displays an image (and only an image) ... how is this done? Regards Matthew Hi all, I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there. I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this? Thanks! Q |
|||||||