|
JavaScript - Loading Certain Images Before Website Loads?
Hi Currently my website waits till all images are loaded up first:
Code:
$(document).ready(function(){
* LOAD UP ALL THEM IMAGES FIRST... *
$(window).load(function() {
letsLoad();
fadingEffects();
});
However my website now has over 200 images on the website and now its taking way too long to load the images. My question's a 1. Is it possible to either load the site when its around 20% or even 50% loaded? OR 2. If its possible to give certain images a tag?? and when these images are loaded then the site loads? Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds http://www.arcvizio.co.uk/ovoma/2/index.html Thanks Similar TutorialsHello everyone, well i have asked for alot of issues earlier but none completely got resolved i hope that i get answer for this one. I want something a script or anything that shows loading as we have seen .gif images, before the game loads. I went through google and tried alot of scripts but failed maybe i don't know the exact method how to implement it as i am weak in jquery or scripting. I would like some one to help me out as i don't know what to do thank you in advance. Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
I have some rollover images on my website, and they don't switch until the page is finished loading. Is this standard? Is there a way to have the rollovers work when the page is still in the process of loading all the images? Thanks Greetings, I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious. I would like the display an image within a 100 x 100 pixel container. If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container. I want to avoid pixelation of the images as much as possible. All images are external and not on the local server so I only have an image URL. I would like to hide all images until they are resized appropriately. Does anybody know of a piece of javascript code that can do something similar to this? Sincerely, Travis Walters 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 Hello, I have develop a piece of code that when the user loads the html page it will load a local image but if the image doesn't exist it will load from a remote server. The question that remains is if it's possible to make an event in case the image is load locally? 1) HTML Page is load 2) If image doesn't exist locally reload from the server 3) If the image is load locally report back to the site Is the 3) possible? Code:
<html>
<head>
<title>test</title>
</head>
<body>
<script language = "javaScript">
var clouds = [];
var i = 0;
while(i <= 5) {
var cld = new Image();
cld.onload = function()
{
clouds.push(cld);
}
cld.src = "cloud.png";
i++;
}
document.write(clouds.length);
</script>
</body>
</html>
Where am I messing up clouds.length returns 0. Why? I know this is simple, but it will get more complex. I can search for the code, but I would like feedback as to what I'm doing wrong. This is more than likely going to be a multi stage question. More to come... ------ Also, I would like to say that this is my first post. Thanks in advance to those who reply. Hello all, I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page. It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user. So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it. Is this easy to do? I am new to javascript so bear with me Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The 'new content' is a div which is at the bottom of the page and is where the new content loads to! Thank you very much Whenever I update my website, sometimes I notice my browser shows the old version or a modification in the browser after I upload to the ftp. Whats the best way to prevent this from happening? Preferably without noticing it happening. Thanks. Hey guys, hope this is in the right place... Basically I was wondering if anyone could point me in the right direction or to an example of where a div slides onto the screen as soon as a page loads. My client wants something like this: http://www.nytimes.com/packages/html...ion/index.html (without parallax or the fade-in) but I refuse to do it in Flash, obviously. I have this gallery he http://juicenothing.com/freelance/gallery.php The div id is wrap. Is this possible? I can't find a good example anywhere!! Thanks (i'm a bit of a n00b, so pls go easy on me ) I have an issue with my javascript files loading (i.e. checking the source code of the page after having loaded yields working links to my external files and the JQuery loading for sure after running some test), but calling a function from my javascript file works in no way shape or form. For example, one test I was running was: From my .js file Code: $("p").click( function() { $(this).hide(); } )
This will work on a standalone page when I test it (not loading from external .js file), but not in the page I need to get my scripts running on. Resolved
i have a javascript bookmark to log me onto my schools site javascript: window.location.href="http://www.MySchool";login=document.getElementById('Login'); void(login.value='user'); pass=document.getElementById('pass');void(pass.value='pass'); LoginbuttonSubmit(); without window.location.href="http://www.MySchool" it works fine if the page is already open, but with using the link to open the page, it runs the remaning script before the page loads and it doesn't work. is there any way to fix this withou using setTimeout() Hello: I have an ajax file to loads the content of another file into a div, here is the js code: PHP Code: <script type="text/javascript"> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcar.php?q="+str,true); xmlhttp.send(); } </script> the file within xmlhttp (getcar.php) has other js codes that are to be executed once the file is loaded into the div. here is one of those files: PHP Code: <!-- loading, please wait message script begins--> <div id="loading\" class=\"loading-invisible\" z-index: 999> <p><font color=\"black\" size='4'>one moment, please!</font> <font color=#218868> Auto Tech Pro « Initiating... » </font><br /><img border='0' src='images/spinnnnnn.gif' width='215px' height='206px'> </div> <script type=\"text/javascript\"> document.getElementById(\"loading\").className = \"loading-visible\"; var hideDiv = function(){document.getElementById(\"loading\").className = \"loading-invisible\";}; var oldLoad = window.onload; var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv; window.onload = newLoad; </script> <!-- loading, please wait message script ends--> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script> <script src=\"/AJAX/popBox1.2.0.js\" type=\"text/javascript\"></script> <link href=\"/AJAX/popBox1.2.0.css\" rel=\"stylesheet\" type=\"text/css\" /> <script type=\"text/javascript\"> $(document).ready(function () { $('#inputbox').popBox({width:550, newlineString: '<br/>' }); }); </script> this however is not working. If I open getcar.php independently of the ajax, the preceeding js codes work fine, but not once the ajax loads the file into div. Any thoughts on how this is doable? Mossa I am working with using Javascript to create a page that scales and keeps its aspect ratio (much like a Flash page would). After a lot of trial and error, I have a prototype up with a couple of problems. It loads correctly once in I.E. Reloading, or opening a new browser, will also load the page correctly. But visiting a different page and coming back causes the width attributes to break. This happens with the non-aspect-ratio version in pure HTML also, but I was hoping that this problem would be solved by establishing values based on javascript variables. As for Firefox, the problem is more or less exactly the opposite. The page loads up all wonky the first time, and a reload or resize will fix it for every time afterward. To see what I'm talking about, you can take a look at http://www.jonesmfgmusic.com/testpag...lem_width.html For the HTML only version, see http://www.jonesmfgmusic.com/testpag...blem_html.html I'm guessing this is something to do with the order in which the data is loaded, so that once the information is all cached, it stops functioning in IE, and starts functioning in FF... can anyone confirm whether I'm on the right track with that, or how to fix it if I am? I'm most concerned by the fact that the width attribute is behaving as it does in IE. That looks like some kind of Microsoft bug to me, and I need a way around it. As for Firefox, I am guessing if I can just get it to load all of the correct information ahead of time, the page should come up correctly, but I just can't think how to do that. Does anyone know what's wrong with this code because when the page loads, the link is not being hidden Code: window.onload = setTarget;
function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
{
theLinks[i].style.display = "none";
}
}
}
So I am having a bit of a weird issue. I am trying to make a webpage compatible with IE8 and it's quite painful. The page works great in firefox and chrome, but in IE8 it only loads some of the time. About 60% of the time the page loads and executes properly, but the other 40% of the time it looks like it hits an error somewhere and doesn't finish loading. I have tried using the IE error console / debugger (by pressing F12), but I can't seem to find any information about why the page isn't loading properly. The page that I am working on is located he http://tinyurl.com/89anxbd The page uses an SVG based UI, and in order to make this compatible with <= IE8 I am using SVGWeb to render the SVG code as flash for IE8 users. For Firefox, and other browser-compliant users the SVG code is rendered natively in the browser. Here is an image of what the page should look like (when it does load correctly in IE8): Here is an image of what the page looks like when it fails to load: It is like the page defines the circle elements for the various cities, but has not yet rendered the provinces (which are defined above the cities in the HTML body), but I'm not 100% sure on this. Any help is much appreciated! I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using. Code: function cboSourceChange(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub1Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub2Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub3Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
I am working on a demo for a movie site, and 90% of everything seems cool. Here I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment. - There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image. I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image. Code: FadeOpacity(main_img_id, 100, 0, 600, 12);
setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);
- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing. Code: document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i]; img_height = document.getElementById(main_img_id).clientHeight; Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated. |
|||||||