homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
onload before images loads
helenp




msg:4626048
 12:03 pm on Nov 26, 2013 (gmt 0)

Hi,
I have a javascript that loads:
window.onload = function() {

that is after images has loaded.
body onload is the same.
Is there some way to load the function before images and other thigs are loaded?
Thanks

 

helenp




msg:4626058
 1:22 pm on Nov 26, 2013 (gmt 0)

I know there are many posts about dom, however I feel lost.

Readie




msg:4626557
 1:15 pm on Nov 28, 2013 (gmt 0)

Yes, just put the code in it's own <script> tag inside the <head> tag before your CSS includes, and non-related javascript file includes.

You don't need to attach a function to an event to execute it.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var a = function() {
alert("I'm executing!");
};
a();
</script>
</head>
<body>
...

helenp




msg:4626566
 2:27 pm on Nov 28, 2013 (gmt 0)


Thanks,
sounds easy,
stupid me.
I kept googling and found the domway:
function choiseonload(){
document.choise.a[0].checked=true;
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
}
var alreadeexecuted=0 //indicates if already executed

if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){alreadeexecuted=1; choiseonload()}, false)
else if (document.all && !window.opera){
document.write('<script type="text/javascript" id="choiseid" defer="defer" src="javascript:void(0)"><\/script>')
var choiseid=document.getElementById("choiseid")
choiseid.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadeexecuted=1
choiseonload()
}
}
}
window.onload=function(){
setTimeout("if (!alreadeexecuted) choiseonload()", 0)
}
however add to head seems easier and maybe charges even before the dom?
I want the quickest solution as it is important javascript.

helenp




msg:4626618
 8:50 pm on Nov 28, 2013 (gmt 0)

I dont get it to work in head,
I suppose I have to call the function somewhere:
<script type="text/javascript">
function choises()
{
document.choise.a[1].checked=true;
document.getElementById("uno").style.display = "none";
document.getElementById("dos").style.display = "block";
document.getElementById("tres").style.display = "block";
}
</script>
<script type="text/javascript">
Thanks

Fotiman




msg:4626900
 4:00 pm on Nov 30, 2013 (gmt 0)


Yes, just put the code in it's own <script> tag inside the <head> tag before your CSS includes, and non-related javascript file includes.

That will also execute your code before any of the DOM is ready as well, which may not be what you want. For example, if you want to attach any event handlers to elements in your DOM, this won't work.
Also, it's generally best practice to put your scripts at the END of the document, just before the closing </body> tag. That way, the scripts will not block any other downloads, and the DOM will be ready even if images haven't finished loading.

The easiest way to accomplish what you are trying to do is just to put your scripts before the closing </body> tag.

helenp




msg:4626907
 4:48 pm on Nov 30, 2013 (gmt 0)

Thanks,
I want to do this:
document.choise.a[1].checked=true;
document.getElementById("uno").style.display = "none";
document.getElementById("dos").style.display = "block";
document.getElementById("tres").style.display = "block";
wich is display part of a form, and block other.
This is import, it is part of the design, so it should be loaded at begininning.
But as I said, I have only managed to load it body onload, window onload and using this function I found wich is better than previous:
function choiseonload(){
document.choise.a[0].checked=true;
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
}
var alreadeexecuted=0 //indicates if already executed

if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){alreadeexecuted=1; choiseonload()}, false)
else if (document.all && !window.opera){
document.write('<script type="text/javascript" id="choiseid" defer="defer" src="javascript:void(0)"><\/script>')
var choiseid=document.getElementById("choiseid")
choiseid.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadeexecuted=1
choiseonload()
}
}
}
window.onload=function(){
setTimeout("if (!alreadeexecuted) choiseonload()", 0)
}

Readie




msg:4626913
 6:26 pm on Nov 30, 2013 (gmt 0)

Yes, I presumed you wanted something running absolutely instantly - hence my instruction to include it in the head tag (As Fotiman says - this is typically bad practice, but if you need something running pre-dom load it's the only solution as far as I know).

getElementById should function as you want it to if you move the script to the end of your body tag, as the elements will exist before the code is executed.

It's not a sure promise of running before images are loaded however - browser caching, server&client bandwidth, and asynchronous file fetching all play a role in that.

helenp




msg:4626925
 7:42 pm on Nov 30, 2013 (gmt 0)

Yes, I presumed you wanted something running absolutely instantly - hence my instruction to include it in the head tag (As Fotiman says - this is typically bad practice, but if you need something running pre-dom load it's the only solution as far as I know).

getElementById should function as you want it to if you move the script to the end of your body tag, as the elements will exist before the code is executed.


Sorry, I dont understand,
do you mean I should add this function inte the head tag?
function choiseonload(){
document.choise.a[0].checked=true;
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
}
var alreadeexecuted=0 //indicates if already executed

if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){alreadeexecuted=1; choiseonload()}, false)
else if (document.all && !window.opera){
document.write('<script type="text/javascript" id="choiseid" defer="defer" src="javascript:void(0)"><\/script>')
var choiseid=document.getElementById("choiseid")
choiseid.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadeexecuted=1
choiseonload()
}
}
}
window.onload=function(){
setTimeout("if (!alreadeexecuted) choiseonload()", 0)
}



At this moment I have it inside the include for the form, where the form appears.
Or maybe there is a better way to add getElementById to the head without above function?

I dont understand what you mean with where body ends.
Do you mean as first thing after body opening (<body>)?
Anyway with above funtion the form loads quicker than with window or body onload.
Thanks

[edited by: phranque at 2:28 am (utc) on Dec 1, 2013]
[edit reason] disabled graphic smileys [/edit]

daveVk




msg:4626959
 2:04 am on Dec 1, 2013 (gmt 0)

The easiest way to accomplish what you are trying to do is just to put your scripts before the closing </body> tag.

Thats where body ends.

helenp




msg:4627004
 8:27 am on Dec 1, 2013 (gmt 0)

The easiest way to accomplish what you are trying to do is just to put your scripts before the closing </body> tag.

Thats where body ends.

Yes I know, but I dont understand how the quickest way can be to add script at end of document. I thought he meant to say where body starts in order to load quicker.

Fotiman




msg:4627070
 8:03 pm on Dec 1, 2013 (gmt 0)


I want to do this:
document.choise.a[1].checked=true;

If you want a specific checkbox to be checked by default, then make it checked in the markup with the checked attribute.

document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";

Again, set the default styles in css rules.

Yes I know, but I dont understand how the quickest way can be to add script at end of document

You can't call document.getElementById with an ID for an element that hasn't loaded in the DOM yet. So you can either call it when the DOM is ready, or slightly later when the window load event has fired. If you put your script at the end of your document just before the closing </body> tag, then that's technically just before any DOM events will fire that indicate the DOM is ready.

helenp




msg:4627072
 8:21 pm on Dec 1, 2013 (gmt 0)

I want to do this:

If you want a specific checkbox to be checked by default, then make it checked in the markup with the checked attribute.

Again, set the default styles in css rules.

You can't call document.getElementById with an ID for an element that hasn't loaded in the DOM yet. So you can either call it when the DOM is ready, or slightly later when the window load event has fired. If you put your script at the end of your document just before the closing </body> tag, then that's technically just before any DOM events will fire that indicate the DOM is ready.


I know I can put it checked in the form, however it was better to do in javascript as I have 2 forms in one form, (dont remember why anymore, but I took away the checked option in form)

The form is rather complicated as it is possible on the fly change between 2 form displays and 2 form actions.

I think the code I use is when dom is ready, or isnt it?

This is the full script, I know its not good for no javascript users:

<script type="text/javascript">
function choiseonload(){
document.choise.a[0].checked=true;
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
}
var alreadeexecuted=0 //indicates if already executed

if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){alreadeexecuted=1; choiseonload()}, false)
else if (document.all && !window.opera){
document.write('<script type="text/javascript" id="choiseid" defer="defer" src="javascript:void(0)"><\/script>')
var choiseid=document.getElementById("choiseid")
choiseid.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadeexecuted=1
choiseonload()
}
}
}
window.onload=function(){
setTimeout("if (!alreadeexecuted) choiseonload()", 0)
}

function toggle(elemento) {
if(elemento.value=="1") {
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
}
else{
if(elemento.value=="2"){
document.getElementById("uno").style.display = "none";
document.getElementById("dos").style.display = "block";
document.getElementById("tres").style.display = "block";
}
}
}

function OnSubmitForm()
{
if(document.choise.a[0].checked == true)
{

if ( ( document.searcherform.s[0].checked == false ) && ( document.searcherform.s[1].checked == false ) )
{ alert ( "Var god och välj Alla datum eller Valda datum" );
return false
}

document.searcherform.action="http://www.example.com/svenska/sokare.php?z=z&d=d&t=t&s=s&day=day&month=month&day2=day2&month2=month2&e=e"
}
else
if(document.choise.a[1].checked == true)
{
document.searcherformsales.action="http://www.example.com/svenska/search.php?z=z&t=t&b=b&p=p&p1=p1&enviar=enviar"
document.searcherformsales2.action="http://www.example.com/svenska/search.php?id=id&enviarid=enviarid"
}
return true;
}
</script>

daveVk




msg:4627149
 10:01 am on Dec 2, 2013 (gmt 0)

try removing this block

function choiseonload(){
document.choise.a[0].checked=true;
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
}
var alreadeexecuted=0 //indicates if already executed

if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){alreadeexecuted=1; choiseonload()}, false)
else if (document.all && !window.opera){
document.write('<script type="text/javascript" id="choiseid" defer="defer" src="javascript:void(0)"><\/script>')
var choiseid=document.getElementById("choiseid")
choiseid.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadeexecuted=1
choiseonload()
}
}
}
window.onload=function(){
setTimeout("if (!alreadeexecuted) choiseonload()", 0)
}

then prior to </body> add

<script type="text/javascript">
document.choise.a[0].checked=true;
document.getElementById("uno").style.display = "block";
document.getElementById("dos").style.display = "none";
document.getElementById("tres").style.display = "none";
</script>

helenp




msg:4627242
 5:08 pm on Dec 2, 2013 (gmt 0)

Thanks, that works perfect, trying to see what loads before.
Not sure I understand why (and if) the piece of javascript I added just befor </body> loads befor any other javascript I have before in the docuemnt....
Thanks a lot

helenp




msg:4627264
 6:37 pm on Dec 2, 2013 (gmt 0)

Reading again what you said, explains why it works better at end than before the form:

"getElementById should function as you want it to if you move the script to the end of your body tag, as the elements will exist before the code is executed."

Of course I am calling and Id that does not exist yet.

Added it just after the form where the id is, and work well.
Thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved