JavaScript - Preloading Images Solution
I 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? Similar TutorialsHey, 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 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! Ok guys, im willing to pay for the solution, got to get this site finished today!! Im having some trouble with a site im working on. In a nutshell, im using a navigation bar with dropdown and JS Fadeshow. When using the navbar dropdown, it goes BEHIND the fade show. If anyone could advise it would be great! I didnt attach the code as i think the best thing to do is just take a look yourself. Its alhambrarenovations. COM Thanks in advance Tell me what other info you need and i'll suply it. I am a govt. employee wanting to make a multi-user database. This is a replacement for the current solution: 1. Single-user Excel sheet on a shared network folder. Here are my design limits: 1. The system uses Windows XP only. 2. I do not have communication with the network admins. 3. I will never have permission to install servers anywhere. They are forbidden. 4. I do not have permission to install any software on any computer. 5. My group only has access to one shared network folder. I've brainstormed some solutions, including: A. Marrying a VB Application with SQLite, with the SQLite file sitting in the shared folder. B. Using how to use SharePoint to develop my application. C. Using Microsoft Access as a client-side GUI which connects to another .mdb on the shared folder. D. Using Internet Explorer with Javascript and ADO ActiveX Objects to manipulate records in a .mdb on the shared folder. I choose D. Choice A is out because I can not install any software development tools. B may not work for me because my database is heirarchical in nature and I want more control over the GUI. Same reason for C, and Access is a little micky-mouse. Amazingly, the security settings on IE allow the creation of ActiveX objects through Javascript. I can also develop with javascript because I have Wordpad. To test the code I can simply run it by launching the HTML. This allows users to open the same HTML file in the shared folder instead of distributing front-ends. The javascript must all be client-side, including all data manipulation. However, I am not concerned about security issues because only our group will be using the system, and all traffic is already contained within Navy networks. So I don't care if I use window.location for storing variables since it works for this case. Does anyone have anything to say about this? I'm looking for pointers, gotchas, guidelines, and any other, better solutions. Thanks. but I just can't figure it out. I have trawled the net for a solution and tried many different things that I have seen but still no luck. Maybe the answer is staring me right in the face and I just can't see it. The code it executing the first time but as the setTimeout tries to start the second loop I get an error 'box is not defined'. Any suggestions and explanations of what I am doing wrong much appreciated! Code: function expand(box) { var box = document.getElementById(box); var originalHeight = parseInt(box.style.height); var inc = 5; newHeight = (originalHeight + inc); box.style.height = newHeight + "px"; int = setTimeout('expand(box)',100); } Hi, javascript method downloadUrl() is very very slow at chrome. means, i am not able to see the data from mysql server at chrome browser.. But this works fine at IE. Pls suggest me with some alternative javascript methods.. thanks, VK Hi, Normally when i try to put a form in a html page i use the Code: <form action="http://www.site.com/test.php" method="post"> and so on with the respective input (Something i learn over here) Today i was trying to create a html box whith the purpose of submiting to a external site but the problem i got is that the external site doesn't use the Code: <form> tag to submit and uses javascript in an onclick event. Is there any way i can still submit? Note: I tried an iframe 0 to load up the site and the respective scripts and emulate the submition in the top page but didn't work out. Thanks for all the help... Hi everyone, I am setting up a website where we want a drag n drop solution for a customer to place an email. To give you an idea on what we want, picture this... A form where the customer can enter there details. Below the form are icons of items. The customer can then drag these items into an image of a box below. Would also be nice if it could list what is "in" the box. Once customer is satisfied, the contents get emailed to us and we can provide further details from there. Mainly has to look nice from the customers side, on our side we are happy to receive just the titles or codes of what they are dragging into this box. Hopefully i have made this simple to understand, if anyone needs any more information, please do not hesitate to ask me. Also, this will be implemented into a Joomla site once sorted out, if that makes any difference. Thank you in advance! Hi Guys & Girls, I am looking for help with a technical issue, which my programmer can't find the answer to. My website has a demonstration facility which allows a client to enter their website which then in turn creates a video transparency overlaying their own website. The problem is some sites with Flash, overlay my transparency video so that you cant see my demo video. Any ideas please. Thanks Maximillion I made some code to factor a quadratic equation and I could use some help finding situations where it finds the wrong answer. If you can find any problems, let me know. Thanks http://www.wdroom.com/factor.html I want to create dynamic Select option in form, I want that whenever user clicks on add member button then new row will get added & i have done that by taking help of DOM createElement method & I want that by using same, I want to create select option drop down list.
Hi guys (and ladies) I am a bit stuck and hope this community might shine a light, or even better can supply me with a solution. I want to do the following: - Having an ordinary webpage containing links - I will link the links with files (word processing files , MS Word, Open Office writer, wordpad or similar) - Now when clicked on the link I want the 'system' to copy the contents of the linked file to the windows clipboard, so when clicking paste, the text from the file is pasted wherever I want. To make clear, I don't want any word processing app to open, just click the link and paste where it needs to be. Possible?? MOST LIKELY but I have no clue how. Any chance someone might know the answer??? I am looking forward to the replies! Thanks PvL Hi guys, I'm trying to write a function such that it can be called, with a particular string specified in the call, and the function will then search a pre-defined array ("pages") of webpage URLs and headers in the form ["[www.sampleurl1.com] Sample Header 1. ", "[www.sampleurl2.com] Sample Header 2. "]; etc. etc., to see if the aforementioned string occurs in the "header" part of any of the indexes of the "pages" array, and then if it does, to alert "Found in x,y,z" where x y and z are the indexes of the "pages" array in which the specified string was found to occur. Here is what I have so far: Code: var pages=["[www.lboro.ac.uk] Loughborough University. ", "[www.oxford.ac.uk] Oxford University. "]; var founds=[] function findIdxsC(s){ for(i=0;i<pages.length;i++) if((pages[i].substring(pages[i].indexOf("]") + 1,pages[i].lastIndexOf("."))).match(/s/)) founds.push(pages[i]) } var array=founds.filter(findIdxsC) var arr2str=array.toStr; alert("Found in "+arr2str); findIdxsC("nIvERsi"); In theory, the above example should alert "Found in 0,1" because I have used the "match" command (so the search is case-insensitive) and the string "niversi" is found in the "header" parts of indexes 0 and 1. However, what it actually alerts is "Found in undefined". As far as I can see the problem lies with either the if-statement(and the associated command to "push" the indexes of "pages" for which the condition applies, to a new array, "founds") or with the filter and toString commands used towards the end. Perhaps it is one of these, or perhaps there is something else I am missing? Either way I would appreciate it if anyone could identify what in my code is causing the "Found in undefined" alert and suggest how I could rectify it, as it's causing me a bit of a headache Many thanks Hey guys. I have a weird issue (you kind of have to see it for yourself to understand). If you double click on the next or previous button quickly (within 500 miliseconds of each other) it creates a double of the next slide. http://insidehb.com/imageofday/ Let me know if you can help. Thanks. Dear Forum, I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with: an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res) a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen) an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+) ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript: Code: <SCRIPT language="JavaScript"> if (screen.width<1000) {document.getElementById('outsidewrapper').style.cssText='overflow: visible;';} </SCRIPT> This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser. If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/ many thanks Will Hi! I have a mysql database with a bunch of quotations in it. I created a blog at http://aro2220.blogspot.com At the top of the blog is an iframe window that directs to http://aro2220.com/blog On that page it uses php to pull out a random quote from the database. The iframe window displays that quote onto the blog. It works great except that the height is not automatically resizing. Is there a way I can use javascript to do this instead? Here is some pseudo-code of what I'd like to be able to do: (p.s. I do not know javascript or much of anything so I am looking for people to tell me how to ACTUALLY do this) Quote: var stringvariable = http://aro2220.com/blog/index.html; int stringlength = stringlength(stringvariable); int autosize = 200 + stringlength * 5; <iframe width="100%" frameborder="0" src="http://aro2220.com/blog" height=$autosize scrolling="no"></iframe> Obviously these are not real functions or proper syntax but hopefully it will paint a clear picture on what I am trying to do. I have a slideshow of quotes based on the "Ultimate Fade-in slideshow (v2.1)" at Dynamic Drive: http://www.dynamicdrive.com/dynamici...nslideshow.htm This is right under my navigation bar, and the drop-down menu items are hidden behind the javascript slideshow. You can see it he http://brookenelson.com/upticon/draft3/index.html Some background: The reason I did it this way because I first started out with a Flash banner with quotes fading in and out, and I ran into the problem with the drop-down menu items hiding behind the Flash... of course I Googled that and found the solution ( see he http://brookenelson.com/upticon/draft3/index2.html ) But in the meantime I played with the javascript slideshow and it worked better for me because it was easier to add new quotes just within the html, without having to go back and edit the Flash item. Anyway, so is there a solution to the drop-downs being hidden behind the .js slideshow? Or should I go back to the Flash? Or is there some other sort of solution or script that would fit my needs better? Many many many thanks in advance. p.s. I personally do not like the little quote slideshow I am using, in either form, but the client is insisting on it!! |