CODEWITHSUNDEEP
javascriptphphtml
Jones G
Jones G

Reputation: 323

How to load script tag after page has loaded?

I am trying to load an ad script right after the page has loaded. Usually, the ad script looks like this

<script id="someId" language="javascript">
    someVar = thisValue;
    somethingElse
</script>

Notice that it got already a <script> tag on it, removing it does not render the ad. So, it got to be in there no matter what, moreover, those things inside shouldn't be modified.

The problem with this is, I could not attempt to place it in a function.

I was trying to do this, to lunch the <script> tag on load

<script type="text/javascript">
function load() {
    //this is were the add goes
    <script id="someId" language="javascript">
        someVar = thisValue;
        somethingElse
    </script>
}
</script>

Then lunch the function by means of

<script type="text/javascript">window.onLoad = load;</script>

So that is technically what I am trying to do, but I cant get this code executed. What would be the best, to run the '' tag ad after page load?

Upvotes: 0

Views: 8698

Answers (4)

allenski
allenski

Reputation: 1862

Easy way to handle your jQuery before or after page loads:

jQuery(function($){
    // Use jQuery code here with $ formatting.
    // Executes BEFORE page finishes loading.
});

jQuery(document).ready(function($){
    // Use jQuery code here with $ formatting.
    // Executes AFTER page finishes loading.
});

Then inside second section, which handles jQuery after page loads, use jQuery.getScript() to load your Javascript file:

$.getScript('/js/main.js');

If you would like new JS to fire off as soon as JS file loads, simple done like so:

$.getScript('/js/main.js', function() {
    // Executes AFTER main.js file is loaded.
});

Click here for jsFiddle example.

ES6 Update

Here's the ES6 version of the script using the arrow function:

// Executes before page finishes loading.
document.addEventListener('DOMContentLoaded', () => {
  // Use JavaScript code here.
});

In the first example, we use the DOMContentLoaded event to execute the code when the HTML document has been completely loaded and parsed.

// Executes after page finishes loading.
window.addEventListener('load', () => {
  // Use JavaScript code here.
});

In the second example, we use the load event to execute the code after all page content has been loaded, including images and other external resources.

Upvotes: 3

loveJS
loveJS

Reputation: 52

Try this way:

<script async src="url_to_ad"></script> It may work. The boolean async attribute on script elements allows the external JavaScript file to run when it's available, without delaying page load first.

Upvotes: 1

loveJS
loveJS

Reputation: 52

Well, there are 2 major mistakes:

  1. window.onload = load; (not onLoad)

  2. It doesn't make sense to write the <script> inside of the function declaration

    <script>
    function load() {
        //this is were the add goes
        someVar = thisValue;
        somethingElse
    }
    window.onload = load;
</script>

Can't you write something like that?

If you can't, at least, try to move your <script> to the end of <body>.

Placing scripts at the bottom of the element improves the display speed, because script compilation slows down the display.

If you really need <script id="someId" language="javascript">, just place it this way:

    <script id="someId" language="javascript">
        function load() {
            //this is were the add goes
            someVar = thisValue;
            somethingElse
        }
        window.onload = load;
    </script>

Upvotes: 2

McMurphy
McMurphy

Reputation: 1274

A quick search for lazy loading found this

<script>
  var resource = document.createElement('script'); 
  resource.async = "true";
  resource.src = "http://example.com/script.js";
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(resource, script);
</script>

Upvotes: 2

Related Questions