|
JavaScript - Preload An Image To Use It As Css Background?
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!) Similar TutorialsI 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. 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"> 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 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> Hello, 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 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 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 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. 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.
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. 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. I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out? Here is my code in the header: Code: <script type="text/javascript">
function getBackground(){
var bgimg = new Array();
bgimg[0] = "background1";
bgimg[1] = "background2";
bgimg[2] = "background3";
var random = Math.floor(Math.random() * bgimg.length);
var imgurl = bgimg[random];
document.body.style.backgroundImage = 'url(' + imgurl + ')';
}
</script>
body: Code: <body onload="getBackground()"> Hi Guys, I would like to be able to change my webpage background image according to the screen resolution the user uses so: if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat else background = #000000 THANKS A MILLION! Im going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work! Heres what i got in my 'name.js' file i got var name=new Array() name='name.jpg' and in my HTML i got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div> <table> <script type="text/javascript" language="JavaScript" src="name.js"> document.write('<td id="name2" background="' + name + '">'); </script> </td> </table> </div> </body> </html> Where have a gone wrong?? If I type Hello World into the name.js file and put it in a tb it works fine, im confused thanks, Paul Hi all, I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies Thanks in advance!! Kyle Hello, I've just finished my website. But my random background images load properly sometimes, and sometimes they load as a half. Here is my website: http://www.finnhaverkamp.com/ Here is the relevant HTML: Code: <!--open random background script-->
<script type="text/javascript">
var randnum = Math.random();
var inum = 7;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var images = new Array;
images[1] = "background1.jpg";
images[2] = "background2.jpg";
images[3] = "background3.jpg";
images[4] = "background4.jpg";
images[5] = "background5.jpg";
images[6] = "background6.jpg";
images[7] = "background7.jpg";
var image = images[rand1];
function chBackgr()
{
document.body.style.backgroundImage = 'url(' + image + ')';
}
onload = chBackgr;
<!--close random background script-->
It's weird. Because my background image is certainly random. It's just that sometimes only half of the image loads. Really strange. Any help is appreciated. Thank You. How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS. You can view the HTML page in question he http://aksdesigns.co.uk/temp/template.html The DIV container is the one with the ID of #MainContent Code: #MainContent {
width: 980px;
height: 550px;
margin: 0 auto;
padding: 0px;
background-image: url(images/Content-bg-1.jpg);
background-repeat: no-repeat;
background-position: top center;
border-left: 2px solid #153365;
border-right: 1px solid #FFF;
}
It probably couldn't be done using CSS be how could I achieve this with Javascript? I have a 16x16 solid color yellow image - .gif type. I'm using it as a background for a div. I'd like to make it transparent but can't figure out how to do. I have Paint.net and follow its instructions to make the image 50% transparent but afterwards, it's completely clear with no hint of yellow. How can I make a transparent solid image? I'd like it about 50% transparent. Thanks... PHP Code: .xstooltip { visibility: hidden; position: absolute; top: 0; left: 0; z-index: 2; font: normal 8pt sans-serif; padding: 3px; border: solid 1px; /*background-color: #DBDBDB;*/ /*background-color: #FFFF77;*/ background-repeat:repeat; background-image:url(/yellow_help.gif); } Hello, I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code: ==== <script language="JavaScript1.2"> var bgimages=new Array() bgimages[0]="../gfx/bgs/bg1.jpg" bgimages[1]="../gfx/bgs/bg2.jpg" //preload images var pathToImg=new Array() for (i=0;i<bgimages.length;i++){ pathToImg[i]=new Image() pathToImg[i].src=bgimages[i] } var inc=-1 function bgSlide(){ if (inc<bgimages.length-1) inc++ else inc=0 document.body.background=pathToImg[inc].src } if (document.all||document.getElementById) window.onload=new Function('setInterval("bgSlide()",6000)') </script> ==== The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate. How would this be possible? Thanks a bunch! -Captainel |
|||||||