|
JavaScript - Help With Image Loading/please Wait Window
ok.
so i have all these big images and i need to let the whole page load before the viewer sees it what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that. Help! Similar TutorialsHi, I have php script that uploads a file. once i click upload it should display a animated GIF image or "Loading please wait" message with the backround transparent screen covering the whole page so that the user is not able to click anything during file upload. How can i do this? Could someone help me on this. Thanks in advance. I'm not sure where to put this question. I'mworking with something called OSClass which is a classified section php program. It has a plugin to make payments to paypal. but I need it to work in a new window, and the link won't do so. Don't suppose anybody sees an issue here? It seems to me that just adding target=_new to this would work. but it doesn't. Still opens the page in the same window. Code: <div class="buttons">
<div class="right"><a id="button-confirm" class="button" onclick="$('#payment_<?php echo $r; ?>').submit();" target="_new"><span><img src='<?php echo paypal_path(); ?>paypal.gif' border='0' /></span></a></div>
</div>
Hi all, I've been trying to figure out for the past 4 hours why this JS pop up window function I wrote won't finish loading in Firefox. When you click the thumbnail image, it pops up a new window with the image enlarged. But for some reason, the Firefox page loading bar on the bottom right-hand side stops at about 25%, even after the image finishes loading. What is wrong with my code that I need to fix so the page shows that it loaded 100%? Here is a link to the page: http://www.unitedautoandtruck.com/cu...ilt_truck.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function pop_up_window (image, title, width, height, text, close_button, scroll_bars, bg)
{
var l = (screen.width-width) / 2 - 6;
var t = (screen.height-height) / 2 - 28;
var pop_up = window.open('', '_blank', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars='+scroll_bars+',resizable=no,copyhistory=no,top='+t+',left='+l+',width='+width+',height='+height);
pop_up.document.write ('<html>');
pop_up.document.write ('<title>'+title+'</title>');
window.name='main';
if (bg == 'default')
bg = '#FFFFFF';
if (bg.charAt(0) == '#')
pop_up.document.write ('<body bgcolor='+bg+' text=black link=blue vlink=purple alink=red>');
else
pop_up.document.write ('<body background="'+bg+'" text=black link=blue vlink=purple alink=red>');
pop_up.document.write ('<style> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} </style>');
if (image != ' ')
{
pop_up.document.write ('<center><img src="'+image+'"></center>');
}
if (text != ' ')
{
pop_up.document.write ('<center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="94%"><tr><td>');
pop_up.document.write (''+text+'');
pop_up.document.write ('</td></tr></table></center>');
}
if (close_button == 1)
{
pop_up.document.write ('<form name="closeit">');
pop_up.document.write ('<center><input type="button" value="Close" onClick="window.close();"></center>');
pop_up.document.write ('</form>');
}
pop_up.document.write ('</body>');
pop_up.document.write ('</html>');
}
// -->
</script>
<title>Transformers Peterbilt Truck</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<a href="javascript:pop_up_window ('../images/customgallery/transformers_peterbilt_truck/DSC02061.jpg', 'Transformers', 623, 534, ' ', 1, 'no', 'default')" onMouseOver="window.status='Press to Enlarge'; return true">
<img src="../images/customgallery/transformers_peterbilt_truck/DSC02061.jpg" width="150" height="113"></a>
</body>
</html>
Hi, I'm writing a page scraper in javascript which involves loading a page to scrape, detecting when the page has loaded successfully and then scraping the data. I can get the 'page loading detection' to work if I load the page in a sub-frame. But this is no good as some sites include frame-buster code which breaks my scraper and I cant get any of the framebuster-buster solutions to work. So instead I decided to look at loading the page in a separate tab. Does anyone know how to reliably detect when a page has finished loading in a tab please? I am using Firefox only and I dont mind if the solution requires some extension or greasemonkey script (I have already added the configuration/commands to allow access to pages from different domains). The code below shows an attempt. It sometimes detects when the initial page has loaded but when I press 'submit' it doesnt detect the second loading. Thanks. Code: <html>
<head>
<script type="text/javascript">
currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");
currentPageObj.addEventListener("load", function(){alert("loaded")}, false);
</script>
</head>
<body>
<form action="http://www.example.com" rel="nofollow" target="currentPage">
<input type="submit">
</form>
</body>
</html>
Hii...i have created a Gallery for my website..now i want to add a Please Wait gif image between every picture until it loads completely..So Please Help..where to and what to add..? HTML Part : Code: <div id="gellary"> <center> <form name=slideform> <table cellspacing=1 cellpadding=4 bgcolor="#4b7b9f"> <tr> <td align=center bgcolor="white"> <font style="color:#24618e"><b>Our Gallery</b></font> </td> </tr> <tr> <td align=center bgcolor="white" width=960 height=540> <img src="gallery/gall1.jpg" name="show" height="540" width="960"> </td> </tr> <tr> <td align=center bgcolor="#88d6f0"> <select name="slide" onChange="change();"> <option value="gallery/gall1.jpg" selected >Image 1 <option value="gallery/gall2.jpg" >Image 2 <option value="gallery/gall3.png">Image 3 <option value="gallery/gall4.png">Image 4 <option value="gallery/gall5.png">Image 5 <option value="gallery/gall6.jpg">Image 6 <option value="gallery/gall7.jpg">Image 7 <option value="gallery/gall8.jpg">Image 8 </select> </td> </tr> <tr> <td align=center bgcolor="#1797c4"> <input type=button onClick="first();" value="<< First" title="Beginning"> <input type=button onClick="previous();" value="<<" title="Previous"> <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay"> <input type=button onClick="next();" value=">>" title="Next"> <input type=button onClick="last();" value="Last >>" title="End"> </td> </tr> </table> </form> </center> </div> =============================== JavaScript Part: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
My goal is to replace a 300px x 300px div with a random assortment of pictures, all being 300px x 300px. I however am not that great at JavaScript (I've taken a bigger bite than I can chew) and would love your guys' help. So far this is what I have for my JavaScript: Code: begin();
function begin()
{
setTimeout(newimage(),7000);
}
function newimage()
{
}
Which brings me to my first question: What's the best method of pre-loading images? And also, if the method is not through JavaScript, how would I reference the image from the JavaScript? My next step would be to transition between images. (Fading specifically.) I really like the fade transition here and I plan on using that in the site. How would I incorporate that into my code? I noticed he made the entire JavaScript code into one line, which is quite annoying. Thanks guys! Hi I have a script which dynamically adds contents to an HTML table using the jQuery's .after();... Now the problem the content is a bit too much and some times IE would crash, so I thought if a loading image would solve this issue? Any ideas? Thanks in advance So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes. What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? Hi, I am using a slideshow and want to basically have an 'image loading' whilst all the images load before the slideshow. Is there a way to do this? So far I have figured the best way around this is to have a GIF as a background image that says the loading message, and then once the slideshow loads over the top its fine, however im guessing this is'nt the right way to do this. I am using this slideshow set to just loop: http://www.dynamicdrive.com/dynamici...lslideshow.htm I am open to using other similar slideshows if there is one more suited. Thanks Hi , Pls solve it Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading. what might be the problem ..pls solve it .......its too urgent thanks in advance nagaraja kharvi I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5. Here is my code Code: <script type='text/javascript'>
var random = Math.floor( Math.rand() * 6);
document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />")
</script>
Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html Where the images on the page fade in as the user scrolls down. I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome. Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!) Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll. Any ideas, or if there is better code out there? Thanks in advance!! 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! SOS, and thank you in advance. I've been going over the links, html and .js & .css files for a couple hours now and can't find the glitch... the images are supposed to just cross fade and replace each other within the container space (sample at http://slayeroffice.com/code/imageCrossFade/xfade2.html), but are loading in a vertical column and then behaving strangely, making each one disappear as the cross fade occurs... even after a full cycle, it loads the next image on the list below the current. LINK to problem page/code: http://www.led-z.com/ Hi, I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript. Where can I find a sample with code? Thanks When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. Hello. I've recently implemented this really cool jQuery preloader called queryLoader. When a visitor comes to my site they are fed all the important images for the entire site (it's a very small site). During that time queryLoader shows a percentage loading animation, and once all the images are loaded it wipes the screen & displays the website. I've placed another custom animation in the "page loading" div, and i want to make sure it loads first so that it is displayed while the rest of the images get downloaded. I've tried pre-loading with javascript as the very first script in my header, before jQuery or queryLoader get loaded, like this: Code: <script type="text/javascript">
pic1= new Image(250,300);
pic1.src="images/page_loading.gif";
</script>
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/queryLoader.js"></script>
However, this doesn't seem to be that effective. When i clear browser cache and reload the page, the page_loading.gif sometimes doesn't appear until the site is almost completely loaded. Is there a more effective way to assure the page_loading.gif gets loaded before any other images? My site is jugtones.com if that helps in any way. Thanks for your time, -Scott Hi, everyone. I've just finally adjusted the way that the background images is laid out. my problem is that the image seems to load in original size and then align to the screen's width. I'm using a javascript code that I got from http://stackoverflow.com/questions/1...g-aspect-ratio and it is working the way I want it to, mostly. My problem is that I'm not sure how to keep the image from exceeding 100% height of the windows without squashing the aspect ratio? I also need to figure out how to fix the visible action of the image being loaded in it's original size? If we can't get the image to load WHILE at the size I want it to be, can we at least 'hide' the image until the loading have been done? I tried to tweak the codes to include the height limitation but it did not seem to have made any differences. This is my first time actually using javascript so please be easy on me, heh My site is at http://www.lost-ear-studio.com (if you refresh the site, you will see random background images being swapped out using php). Code: <script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
Code: <img id="bg" src="randombg.php" onload="resizeToMax(this.id)"> Code: #bg{
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
I am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads webpages inside the main index one, I would like to use the code on one of those pages but something is not working. I am not able to use the specified DOCTYPE but find that it works all the same with my current one, however if I use the given one in addition to the one I have now (and need) then my site does not work properly, further if I replace it I get the same results. My existing doctype: Code: <DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> What the code uses: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> I'm not sure what the differences are but I've been advised that I need to run the code in "standards mode" before I try to fix it. As I see it the code works, just not where I need it to, nothing unusual on my site and nothing unusual that I may be wrong. On my site you can see at the bottom right a blue text link called "aaaa" this is the code that works, however (clicking the dome to the left of that to scroll the page down and selecting the "met.a has guts" menu option diagram) you'll see the "aaaa" link again at the bottom left of that page and that is where I need it to work from. I even tried using the exact code from the example in that linked .htm page but it doesn't make a difference, it probably even hinders the code as it looks at the main html page. But if loading the page on its own the code will work, so its related to the menu and the way that works. If anybody can help that would be brilliant, I'm sure its something simple. Thanks! |
|||||||