PDA

View Full Version : Use defer property and dynamic content



ryubr
Aug 26th, 2003, 09:04 PM
Hi,

Im trying to use the property defer into a JS script tag to make the page load and then load and execute a js code.

This is the JS code i add using defer (test.js):


function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
}

writit(SOME_HTML_CODE_HERE,'test');

This is my HTML code:


<HTML>
<HEAD>
<TITLE>Teste</TITLE>
</HEAD>
<BODY BGCOLOR="white">
Some text here
<span id="test"><!--here the js will write content --></span>
<script src="test.js" defer></script>
</body>
</html>


So using this i can write HTML content, images, texts, formated texts after the page load, but if i try to write other JS content to execute a simple alert command for example it does not work, dont give error but also dont work, i think this is why the defer propertie works. Try to write the script tags just like Abhi suggests does not work also.

Whether the browser should proceed with rendering regular HTML content without looking for the script to generate content as the page loads. This value needs to be set in the SCRIPT element's tag at run-time. When this property is set to true by the addition of the DEFER attribute to the tag, the browser does not have to hold up rendering further HTML content to parse the content of the SCRIPT element in search of document.write( ) statements. Changing this property's value after the document loads does not affect the performance of the script or browser.

So how to write DHTML code using this?
Why i want this? I use it to make the page load and render faster, because if you dont use defer and the script is "big" or get a timeout, the browser will "wait" until get the JS to finish render the page, using defer it does it just after the page load, so this is why i write the HTML content after that....

But... how to write other js , even a simple one like an alert or a DHTML content? Defer is the only way to make the browser load the main js file after the page load, so i wil use the writit() function inside that JS to write content on that span "test" and there i wish to place DHTML or js, how to do that?

Thanks in advance!
Ryu

Mr J
Aug 26th, 2003, 09:32 PM
Not exactly sure on your question here but try the following


<HTML>
<HEAD>
<TITLE>Teste</TITLE>
<script>
function writit(text,id){
if (document.getElementById){
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all){
x = document.all[id];
x.innerHTML = text;
}
}

function init(){
writit("SOME_HTML_CODE_HERE",'test');
}
</script>
</HEAD>
<BODY BGCOLOR="white" onload="init()">
Some text here
<span id="test"><!--here the js will write content --></span>
<script src="test.js" defer></script>
</body>
</html>

ryubr
Aug 26th, 2003, 09:48 PM
Let me try to clarify:

I have a website that have banners loaded by external JS files. So lets supose i have to show a big DHTML banner... if you dont use defer property from the script tag the browser will "stop" the page render until get all the script because it "waits" for any kind of "document.write" command that can affect the page render. So a js file that could have 100kb would take a while and the user should wait until it be there to the browser complete the proccess. The suggested code would not work too.

Using defer the browser assumes that on that js file tehere is no "document.write" information and come back to load and execute it just after the page to be 100% loaded.

So the function i send works this way, after the page load the script cnanges the content between the span tag on the HTML and include new HTML there, this works..... but the big problem is when i try to load another extrnal JS file or even a simple alert command on js. Nothing happens. So if i have DHTML banners to load on the page it would never work....

Try to use the "writit(..)" function to write HTML content, it will work (like
<b>text</b>) but if you try to write
<script>alert("Hello")</script> nothing happens, even trying to escape the code to prevent errors, actually no erros happens, just doesnt execute JS commands

Is there a way? Can i give more info?

Thanks in advance!
Ryu

Mr J
Aug 26th, 2003, 11:47 PM
So you want the page to finish loading before the banners are shown?

ryubr
Aug 26th, 2003, 11:59 PM
Exactly!

The code i sent works when you write normal HTML code and img tags, but not for JS (used for DHTML).

Any ideas?

Thanks :-)

Mr J
Aug 27th, 2003, 12:15 AM
All you have to do is use the "onload" event in the opening BODY tag to call a function in the external .js file

<BODY onload="testme()">


in the .js file


function testme(){

alert("HI")

}

see attachment

ryubr
Aug 27th, 2003, 12:32 AM
Sorry,

Doesnt work just because the point is use "defer" property of the script tag. Onload loads a function after the page loads, yes, but the point is, the main external js file that have the main function to write the content and the content to be write should be loaded after the page load, onload cant so that!

For example, try to create a js file with "500kb", include it without defer... then load the page, you'll see that it will wait until the js to be downloaded 100% to finish render the page.

If you use "defer", it will download the js after render the page.

So that moment i want to write the content as explained on the messages before using the JS DOM .... HTML content no problem to be write after... but not for JS or DHTML content.

Onload is not the solution is not just a matter to load the banners after the page load, but to load the js file after the page render (using defer) and then execure the function to write the content for the banners on that span tag.

Think about the defer that is my problem, to use it and then load more Js content...

Any ideas?

glenngv
Aug 27th, 2003, 04:29 AM
try putting the onload handler in the js file not in the <body> tag:



function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
}

window.onload = function(){
writit(SOME_HTML_CODE_HERE,'test');
}

ryubr
Aug 27th, 2003, 04:37 AM
Unfortunatelly the onload does not work, no matter the way! Onload event executes after page load, but the external js filw will be get with the page and will stop it to execute, so i need to use defer to get it after the page load, so i dont need to use onload and i cant becauds ethe goal is to dont use it, because it does not have a function to me if the script still be get with the page and not after the browser render t.

And as i said the problem is not to call a script using onload, but to load the external file (do the HTTP get) after the page render (using the defer)

See i dont need onload event to write simple html code, it works with or without.... the problems is writing another JS...

Im not includeing the JS in the "simple" way, im using defer:

<script src="test.js" defer ></script>

This makes it to be get after the page load , so as the code i sent it execute the function and write HTML on the spam, this works, what does not work is have a nother js writed by that function to work, try a simple alert it does not work, try and if anybody have a option for that please let me know

See that using the function i write the HTML code where we have the span tag, tghen the browser renders it and show, the same need to work with a script tag to be writed there.

Thnaks for all help tries :thumbsup:

glenngv
Aug 27th, 2003, 05:11 AM
By the time the browser finished rendering the page, the onload handler in the deferred script is not yet executed since it is not yet parsed by the browser. After the browser parsed that script, it will see an onload handler and (I think) the browser will execute it. That's my idea, though of course not sure if that's true. Have you tried it?

ryubr
Aug 27th, 2003, 04:40 PM
Sure,

I just sent these messages because i tried all these options before!

And this is why im still having a problem to found a solution, everybody thinks only on onload and not on defer and DOM :-(

Vincent Puglia
Aug 27th, 2003, 11:47 PM
Hi ryubr,

As I stated in the other forum: IMHO, this works. If it is still not appropriate, I don't understand why. The html page will load completely before the *.js file is loaded and the onload handler will execute within the span.

the *.html file:


<script language="javascript" src="testDefault.js" defer></script>
</head>
<body onload='init()'>
This is my HTML code:

Some text here
<span id="test">original text</span>
<script>
alert("note the span's original text")
</script>
<p>text after the spans</p>
</body>



the *.js file


function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
}
alert('in js file');
function init()
{
alert(3)
writit('SOME_HTML_CODE_HERE','test');
}


Vinny

ryubr
Aug 28th, 2003, 01:06 AM
Thanks,

But i cant use onload and if i could it would not work as it should be because the defer property.

Lets assuume i will use this to write banners into a page.
I can use defer because imagine that my main script (test.js) will be loaded into a page of other site, then they would place the <span> that on the place it should appear the banner.

I cant use onload because on that page could have another onload or the site would not include it for many reasons, we cannot depend of that... A webmaster of that site would not change his template just to allow my script to work.

So using defer and the function of that js i can write the content on the span tag. Simple HTML works like write <b>text</b> etc... But <script>alert("x")</script> doesnt... why that? Because the brwoser doesnt parser a js after the page be 100% loaded?

Any ideas or questions to get more info to be able to help?

Thanks!