|
JavaScript - How To Cache Cgi Generated Gifs In Browser On Preload?
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.
Similar TutorialsDoes anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me. I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.) Is it true? I realise tables are not best used for this purpose, but did this also happen in the good old tables days? 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. 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 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! 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> 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. 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 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 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. Hi i need to make a js programe that will replicate a direct mapped cache. I have been given an array with some random cache data. The programe just has to calculate the hit/miss ratio. Im not asking for the code but just help to get started. I think it will be a very short programme but have no clue where to start. Would someone tell me what functions i would need? The cache can be decimal or binary. Thanks. Hi, I have an onclick handler as: onClick="window.open ('test.cgi?action=testfile', 'testframe')" When clicked on the button for the first time, request is sent to webserver and target file for "testfile" action is getting loaded in frame testframe. But when i click for the second time, request is not sent to webserver and the cached entry is getting loaded. This issue is occuring only in IE but not in FF. I went to the cached data in c:\Documents and settings\<user>\...\Temporary Internet Files\ and i'm seeing that targetfile for test.cgi?action=testfile is getting stored and "last accessed" time stamp is updated but the "last checked" value is not getting updated (when ever i click on the button). But no issue is seen when the onclick handler is like below: onClick="document.location='test.cgi?action=testfile' I could not understand what exactly is the issue: Is it with Frames/window.open/Do i have to remove cached entries? etc... Can any one please help me out on how i can proceed with this... Please let me know if i'm not clear with above description. Thanks in advance... I've added a js scroller to a client's website, and they are able to edit the scroller text using a php text editor. The script is in a .txt file that is added to the homepage with a php include. Problem is, the edits don't show up right away, sometimes not until next day. I've had the same problem with Flash players (playlists are .txt files), and occassionally with image files, in both IE and FF. Browser continues to use the old file, even if cache is cleared, unless file is renamed. I've cleared cache, confirmed that the old file is gone, deleted the file entirely from the server, rebooted - pretty much everything. Tried onLoad="refresh()", no effect. Anyone know what causes this, and how to fix it? Hello, I believe this is something simple that I'm missing. I'm still fairly new to both js and php (and this may be a better question for the php forum - hopefully it makes sense though). What I have is a js function which uses the date/time to generate a 'unique' number onLoad, and places this number in the HTML as text in a <td></td>. This works fine. I'm also doing the same thing with the value attribute of a <input type="hidden"> element, which also works fine. The problem is, when I submit my form, php refuses to echo the value (but reports no errors). Here is all the relevant code: The HTML: Code: <td class='dandt' id='iquotenum' colspan='2'></td> The Javascript: Code: function loaded()
{
var d = new Date();
var vqtnum = document.getElementById("quotenumber");
var iqtnum2 = document.getElementById("iquotenum");
var vqtdat = document.getElementById("quotedate");
vqtnum.innerHTML = "" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds();
iqtnum2.innerHTML = "<input type='text' name='iqtnum' id='iqtnum' value='" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds() + "'></input>";
vqtdat.innerHTML = "" + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
}
The PHP: Code: <?php $iqtnum = $_GET['iqtnum']; echo "<tr><td>Quote Number: </td><td>" . $iqtnum . "</td></tr>"; ?> I've verified by using Chrome's inspect element tool that the value attribute is being set correctly by my script, and I've got a few other php echos that get the user's input from other text boxes which use the same method*, and which work fine. Also while debugging I changed the type from hidden to text so I can see it easier. *Except that the value in this case is typed into the box, rather than generated by js. Thanks in advance. edit: I forgot to mention that I also have in the body tag of the HTML onLoad="loaded()". Hello again, CodingForums. I have a .php page that generates the following javascript which is intended to hide/show a form somewhere on the page. (It only shows right now because it's not done yet.) However, after the page is rendered and given to the client, the function calls do not work, and the error console reports that "[function name] is not defined." Code: <script type="text/javascript">
function showEdit(num)
{
var elem = document.getElementById("form-wrap"+num);
var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">";
str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>";
str = str + "<input type=\"hidden\" name=\"q\" value=\"edit\"/>";
str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>
str = str + "<label for=\"title\">Title</label>";
str = str + "<input type=\"text\" name=\"title\" value=\""+document.getElementById("title"+num).innerHTML+"\"/>";
str = str + "<label for=\"picture\">Picture</label>";
str = str + "<input type=\"file\" name=\"picture\"/>";
str = str + "<label for=\"caption\">Picture Caption</label>";
str = str + "<input type=\"text\" name=\"caption\" value=\""+document.getElementById("post-image"+num).getAttribute("title")+"\"/>";
str = str + "<label for=\"content\">Entry Text</label>";
str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\">"+document.getElementById("content"+num).innerHTML+"</textarea>";
str = str + "<input type=\"submit\" value=\"Edit Post\"/>";
str = str + "</form>";
elem.innerHTML = str;
}
function showDelete(num)
{
var elem = document.getElementById("form-wrap"+num);
var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">";
str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>";
str = str + "<input type=\"hidden\" name=\"q\" value=\"delete\"/>";
str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>
str = str + "<label for=\"really\">Delete this post?</label>";
str = str + "<input type=\"radio\" name=\"really\" value=\"Yes\">Yes</input><br/>";
str = str + "<input type=\"radio\" name=\"really\" value=\"No\" checked=\"checked\">No</input><br/>";
str = str + "<input type=\"submit\" value=\"Confirm\"/>";
str = str + "</form>";
elem.innerHTML = str;
}
function showNew(num)
{
var elem = document.getElementById("new-form-wrap");
var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">";
str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>";
str = str + "<input type=\"hidden\" name=\"q\" value=\"new\"/>";
str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>";
str = str + "<label for=\"title\">Title</label>";
str = str + "<input type=\"text\" name=\"title\"/>";
str = str + "<label for=\"picture\">Picture</label>";
str = str + "<input type=\"file\" name=\"picture\"/>";
str = str + "<label for=\"caption\">Picture Caption</label>";
str = str + "<input type=\"text\" name=\"caption\" />";
str = str + "<label for=\"content\">Entry Text</label>";
str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\"></textarea>";
str = str + "<input type=\"submit\" value=\"Create Post\"/>";
str = str + "</form>";
elem.innerHTML = str;
}
</script>
These are all the elements that call the javascript functions. Code: <a onclick="showNew('2');" class="edit-delete">Create New Entry</a>
<a onclick="showDelete('1');" class="edit-delete">Delete</a>
<a onclick="showEdit('1');" class="edit-delete">Edit</a>
<a onclick="showDelete('0');" class="edit-delete">Delete</a>
<a onclick="showEdit('0');" class="edit-delete">Edit</a>
I have no idea why my functions aren't being recognized by the interpreter as such, but it's probably something simple. Thanks in advance for the help, and I'll be happy to post more code if it might be relevant. Hi I am a complete beginner when it comes to JS so anything and everything will be in very basic terms... It is probably easier if i show you my problem, I use milonic s menu for my website, as such i need to generate some sort of site map so that the various crawlers can get full access.... I used to use the phpsite map which came with Milonic Menu, however since i have moved hosts, this has stopped working.... http://www.tugtracker.co.uk/menu/sitemap.php - any offers on why it has stopped working are welcome (windows hosting) as it still works on my other site (linux hosting) http://locodocs.co.uk/misc/sitemap.php anyway, thats not the point of my post.... Also provided by milonic is the option to provide a list based menu using some js... http://support.milonic.com/demos/site_index/index.htm I have incorporated this into my site www.tugtracker.co.uk - click misc on the menu then "Site index" You will see a pop-up erm pops up.... This looks okay and something like what i want, However i need it to be placed into a webpage so i can give it a www.tug..... address and then i can point the crawlers at it.... How do i code it into the page to that the JS will run within the body and result within the body of a page? |
|||||||