|
JavaScript - Preload Images In Two Groups
Hi!
I have a website that requires preloading images a lot. I would like to preload only the most important images first and display the page as quickly as possible. After that it will take at least 20 seconds before the user will need the rest of the images. Is there a way of making two preloading groups and have the second group load in background after the page is already visible? My current preload code is simply like this: <SCRIPT language="JavaScript"> if (document.images) { pic01= new Image(200,200); pic01.src="images/base.jpg"; pic02= new Image(200,200); pic02.src="images/grump1.jpg"; pic03= new Image(200,200); pic03.src="images/grump2.jpg"; pic04= new Image(200,200); pic04.src="images/grump3.jpg"; pic05= new Image(200,200); pic05.src="images/grump4.jpg"; pic06= new Image(200,200); pic06.src="images/love.jpg"; pic07= new Image(200,200); pic07.src="images/smile1.jpg"; pic08= new Image(200,200); pic08.src="images/smile2.jpg"; pic09= new Image(200,200); pic09.src="images/smile3.jpg"; pic10= new Image(200,200); pic10.src="images/smile4.jpg"; pic10= new Image(200,200); pic10.src="images/rotate.gif"; } </SCRIPT> Similar TutorialsHello, I've some javascript code which preload the images for a photo gallery made of clickable thumbnails and the images to be shown. The script is structured to preload the images in order to have a smooth experience while browsing through the thumbnails but, as the images are needed in quite high quality and can't be compressed any further, the page is too slow to load. Basically, as the script sits between the head tags at the beginning of the page, it holds the loading of the whole page, leaving the user with a black page for a good 10 seconds on a fast connection. Is there any chance I can preload the images in such a way I don't have to hold the whole page from displaying while the images are loaded? It would be ideal to be able to display the contents of the page (logo, menu, 1st picture of the gallery and foot of the page) while the images preload in the background. Could please anybody help with this? Here is the code I'm using: <SCRIPT language=JavaScript1.1> var myimages=new Array() function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("images/gallery/editorial/1.jpg","images/gallery/editorial/2.jpg","images/gallery/editorial/3.jpg","images/gallery/editorial/4.jpg","images/gallery/editorial/5.jpg","images/gallery/editorial/6.jpg","images/gallery/editorial/7.jpg","images/gallery/editorial/8.jpg","images/gallery/editorial/9.jpg","images/gallery/editorial/10.jpg","images/gallery/editorial/11.jpg","images/gallery/editorial/12.jpg","images/gallery/editorial/13.jpg","images/gallery/editorial/14.jpg","images/gallery/editorial/15.jpg","images/gallery/editorial/16.jpg","images/gallery/editorial/17.jpg","images/gallery/editorial/18.jpg","images/gallery/editorial/19.jpg","images/gallery/editorial/20.jpg","images/gallery/editorial/21.jpg","images/gallery/editorial/22.jpg","images/gallery/editorial/23.jpg","images/gallery/editorial/24.jpg","images/gallery/editorial/25.jpg") function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </SCRIPT> and this is for the thumbnails: <a onmousedown='changeimage(myimages[0],this.href)'><img src="images/gallery/thumb1.gif" alt="1" width="16" height="16" border="0" /></a> <a onmousedown='changeimage(myimages[1],this.href)'><img src="images/gallery/thumb2.gif" alt="2" width="16" height="16" border="0" /></a> <a onmousedown='changeimage(myimages[2],this.href)'><img src="images/gallery/thumb3.gif" alt="3" width="16" height="16" border="0" /></a> <a onmousedown='changeimage(myimages[3],this.href)'><img src="images/gallery/thumb4.gif" alt="4" width="16" height="16" border="0" /><br /> </a> etc.... Any help would be much appreciated. Thanks paolo Hi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>
<script>
var interval = 4 * 1; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 1000);
};
fade();
</script>
</body>
So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! Hey, I'm a javascript newbie and am frankensteining various bits of code I have managed to find on Lightboxes, preloading, and swapping image Basically, what I want to happen is to run the mouse over the thumbnails on the left side of the page and a larger version of that is in the middle, while information on the right changes to match the picture in the middle. The information is working and the thumbnails appear to be working- at least they go white when running the mouse over them. The problem is the center images aren't appearing at all. I think the following is the relevant information. Code: 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];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_setTextOfLayer(objId,x,newText) { //v9.0
with (document) if (getElementById && ((obj=getElementById(objId))!=null))
with (obj) innerHTML = unescape(newText);
}
Code: <img src="imagetmb.jpg" name="boxd" id="boxd" onmouseover="MM_swapImage('boxd','','whitebox.jpg','','image.jpg',1);MM_setTextOfLayer('info','','Info<br /><br />Ink on Bristol Paper<br/><br />13 x 17 in<br /><br>May 2011<br/>')" onmouseout="MM_swapImage('boxB','','imagetmb.jpg',1)"/>
I think it's because the images in the center don't have a source, only a name, but I'm not sure where I would fit that in. I tried putting it in the second set of code, but it did not work out. I have more than a hundred images (small ones though), which is a cut-to-pieces large image arranged in tables that I want to preload. I have been looking for a preload script that could possibly load all images in a folder by wildcard and if possible via JavaScript. Any suggestions? Any other language will be welcome as long as it will run on Linux. I have a good preload javascript here that I downloaded from hotscripts.com that displays a progress bar, percentage of download, and number of images downloaded. The bad thing is that creating an array out of a hundred images will be tedious especially with computer genereted filenames! If anyone knows of a program that could automate the process then we can forget the wildcard! Hehe! Hope someone has ideas . Thanks in advance. Hi Everyone, I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv". I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either. Can anyone help please? Anita I want to use an image as a CSS background-image so I used the Image constructor to load the image: Code: (new Image()).src="http://www.mediafire.com/imgbnc.php/432b35f2cc3340ea03d25128ada294476c92189353679dfb7e9cc9dfde6498f06g.jpg"; but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!) Hi all If I pre-cache imgs like this ... (10 in all) Code: <head> <script type="text/javascript"> PreImage1= new Image(width,height); PreImage1.src = "images/navbtn/onbtn_1.gif"; PreImage2 = new Image(width,height); PreImage2.src = "images/navbtn/onbtn_2.gif"; PreImage3= new Image(width,height); PreImage3.src = "images/navbtn/offbtn_1.gif"; PreImage4 = new Image(width,height); PreImage4.src = "images/navbtn/offbtn_2.gif"; </script> Will imgs be read from cache if I then do this?... or have I missed smthg? Code: <body> <img src="images/navbtn/offbtn_1.gif" onmouseover=this.src="images/navbtn/onbtn_1.gif" onmouseout=this.src="images/navbtn/offbtn_1.gif" alt="" /> </div> low tech Hi, I'm completely new to using JavaScript having never used it before so please forgive me if this is ridiculously easy to solve. I want to include an expandable FAQ section in part of my website. I managed to find some code that works however by default the sections are expanded. I want them to automatically be collapsed when the page loads and when you click the image it then expands and shows the hidden text. The code I found is Code: <head><title> Untitled Page </title>
<script type="text/javascript">
function expandable_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; } var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
function expandable_changeimage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand) img.src = sPlus;
else img.src = sMinus;
}
}
function Toggle_trGrpHeader1()
{
expandable_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
expandable_toggle('trRow1');
}
function Toggle_trGrpHeader2()
{
expandable_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
expandable_toggle('row1');
}
</script>
</head>
<body>
<div> <table border="0"> <tr id="trGrpHeader1"> <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td> </tr> <tr id="trRow1"> <td> Hello<br><br></td></tr>
<tr id="trGrpHeader2"><td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td> </tr> <tr id="row1"> <td> 123</td></tr>
</table>
</div>
</body>
</html>
Any help you can give would be greatly appreciated. Many thanks Hi, I am completely aware that Framesets are an outdated way of designing these days (I don't have time to redesign the site now), but I have a question:. Is there a way I can have a "Please wait.. Loading.." message of some sort on the "contents.html" frameset? It takes a while to load.. Code: <html> <head> </head> <frameset rows="130,*" framespacing="0" border="0" frameborder="0"> <frame name="banner" scrolling="no" noresize target="contents" src="title.html"> <frameset cols="523,493"> <frame name="contents" target="main" src="contents.html" scrolling="auto"> <frame name="main" src="letters.html" scrolling="auto"> </frameset> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> Thanks so much. Hi! I'm just starting to learn java script and have a questions. If anyone could answer this it'd be great. When preloading images for use in things like mouseout/on/etc what is the proper code? var image1, image 2; image1 = new Image() image1.src = "" image2 = new Image() image2.src = "" OR var image1 image1.... var image2 image2.... The book I have list both but only the 2nd way I listed works. Why? Thanks Hello, I'm not sure if this is the best forum for my question or not, but I'll explain what I'm doing and we'll see. I am trying to make a little easter egg hidden inside a web application and its going great except I'd like to hide my .gif files by changing their file extension to something like .dat instead so it won't be so obvious what they are. Basically all I really want to do is have an html image tag that points to a file who's extension is not gif, but really does contain gif content. (I want to mask the fact that the file is really a gif when looking at it in the directory listing.) So, my idea was I would point the <img src=""> tag's src attribute to a cgi script that could write out a Content-type: image/gif header and return the binary gif data. So, I did this and it worked great, but its really slow. (I output the image multiple times and animate it.) So, I thought I could maybe use Javascript to preload these cgi requests and cache them, but every attempt I've made to do this fails! It's like the browser doesn't want to cache the cgi requests. My method of attempting this was to create Image() objects in javascript and set their src attribute to my cgi script call and then set an onload to keep track of when they were all loaded. That seemed to work fine, but then when I try to display an image with the src tag equal to the cgi location (after they were all loaded) its like it goes and reads the code to pull it down again instead of using a cached copy because its really slow. So, then I thought, hey maybe I could just manually edit the binary content of the gif file (which has an extension like .dat) to also contain Content-type: image/gif\n\n embedded at the front of the file. So, I opened the binary file with a hex editor and inserted that text content at the front... but it didn't work. I had <img src="myfile.dat"/> Is there an easy way to make the browser recognize my gif file even if I don't use a gif extension? If not is there a way to preload and cache cgi responses with Javascript so that they don't keep reloading each time I refer to them? Any other ideas? Thanks.
Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for. My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection. I have written a basic script, using the basic format of: <SCRIPT LANGUAGE="JavaScript"> Image1= new Image(50,60) Image1.src = "something.gif" Image2 = new Image(70,80) Image2.src = "somethingelse" Image3 = new Image(90,100) Image3.src = "lastsomething.gif" </SCRIPT> and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?) Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks! <html> <head> <title>Finish Well Endurance</title> <meta name="generator" content="Namo WebEditor"> <link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css"> <script type="text/javascript"language="javascript"src="loadimages.js"></script> </head> <body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646"> <table border="0" align="center" cellpadding="0" cellspacing="0" width="600"> Im new to javascript and was hoping someone could help me with my problem. I have a form that has multiple radio button groups and i want it to validate so that if any button is selected in one group you cannot make a selection in the other groups. any advice would be appreciated Hello, First time on the forum and I am admittedly a complete noob, so forgive me for any grievous misconceptions. I am a teacher trying to create a bulletin board on my website where students, teachers, and parents can post messages. I am trying to use the site linoit.com I am trying to embed that site on my website using an iframe url: http://www.capretto.net/stickyboard.shtml My problem is that when you go to the message board on my site it asks your for a username and password to login to access my message board from linoit. I was hoping there is a scripts or other trick that will auto fill the username and password when the page loads so that the message board opens automatically. Not too worried about privacy, but I could distribute the username and password to all interested parents, teachers, etc. but in my experience one more step between students and the information they need can be the difference between them not receiving the info. I'd be happy to give any contributors credit on my site for their coding help. Thanks in advance. Hey folks, I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!! Code: <div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
The CSS and Jscript files are attached. The problem: I can't get the code to send out my alerts due to empty radio groups. what I'm trying to accomplish: I want Javascript to send a alert to the user if none of the radio buttons within a group are checked. Short Summary: I'm new to Javascript and I've been trying to figure this out myself, but I honestly don't know what's wrong. If you guys can help that'd be great. Thanks in advance. and if the information that I've provided is in anyway confusing let me know and I'll try to help, but again my knowledge is limited. Here is a simplified version of my form.*There are originally 10 questions total. "Names: q1-q10"* Code: <html> <head> <script type="text/javascript" src="val.js"></script> </head> <body> <form method="POST" name="theForm" onsubmit="javascript:check();" class="surv_style" > <p class="ttl" ><label>Question 1: </label></p> <p><label> <input type="radio" name="q1" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q1" value="some"> Sometimes </label></p> <p><label> <input type="radio" name="q1" value="no"> No </label></p> <p class="ttl" ><label>Question 2: </label></p> <p><label> <input type="radio" name="q2" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q2" value="somet"> Sometimes</label></p> <p><label> <input type="radio" name="q2" value="no"> No</label></p> <p><label> <input type="radio" name="q2" value="no_notice"> I havent noticed</label></p> <p class="ttl" ><label>Question 3: </label></p> <p><label> <input type="radio" name="q3" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q3" value="somet"> Sometimes</label></p> <p><label> <input type="radio" name="q3" value="no"> No</label></p> <input type="submit" name="sub_butt" value="Submit"> </form> </body> </html> Here is my Javascript code: Code: function valR_butt(rbgn){
var formName = "theForm";
var form = document.form[formName];
var isChecked = false;
var counter = form[rbgn].length;
for(var x=0;x<counter;x++){
if(form[rbgn][x].checked==true){
isChecked=true;
break;
}
}
if(isChecked==false){
alert(errorMessage);
return false;
}else{
return true;
}
}
function check(){
var q1 =validateRadioButton("q1");
if(q1==false){
alert("Please select a answer to question 1");
return false;
}
function check(){
var q2 =validateRadioButton("q2");
if(q1==false){
alert("Please select a answer to question 2");
return false;
function check(){
var q3 =validateRadioButton("q3");
if(q1==false){
alert("Please select a answer to question 3");
return false;
}
alert("OK!\nYour selection is valid");
return true;
}
}
if you start composing a new message in google groups http://groups.google.com/ and then click the back button a window appear that looks like a javascript confirm popup, however instead of the "OK" "Cancel" buttons, the buttons show a custom wording "Leave this page" "Stay on this page". Anyone knows how do they do that in javascript? 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. 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. |
|||||||