How to lazy-load an inline javascript?

Question

I want to load a banner ad script only when specific div is reached. For example - banner div at the bottom of the page.

I can load external scripts by using jquery lazy script:

var options = {
    type: "visible",
    id:"mydiv", //div Id
    scripts: [
        "1.js",
        "2.js",
        "3.js"
            ],
    success: function () {

    }
};
$.lazyscript(options);

But how to load inline scripts?

Thanks.

Attempting to "lazy load" an inline script is a non sequitur. — RobG
– RobG, Commented Jan 23, 2015 at 14:32
when specific div is reached. What exactly do you mean? When the div first loads or when a user first scrolls it into his vision? — Alternatex
– Alternatex, Commented Jan 23, 2015 at 14:47
@Evaldas Try this one: ressio.github.io/lazy-load-xt/demo/widget.htm — Denis Ryabov
– Denis Ryabov, Commented Jan 24, 2015 at 12:45

grossadamm · Accepted Answer · 2015-01-23 14:19:57Z

1

The entire html document is parsed top to bottom, script tags included. So in that sense, your inline javascript is "loaded." I may be misunderstanding your question.

If you didn't want your inline script to be executed as soon as it was parsed you would need to use some kind of event listener in the inline script.

For example, assuming your inline banner ad code is wrapped in a function

<script>
loadBannerScriptAd()
</script>

you would need to write something like

<script>
$(document).on("loadBannerScript", loadBannerScriptAd)
</script>

which you could trigger at any point by

$(document).trigger("loadBannerScript")

All of this is assuming you have jquery based on your code sample you gave above. Check out http://api.jquery.com/trigger/ for detailed information on how you could trigger custom events via jquery.

answered Jan 23, 2015 at 14:19

grossadamm

4523 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

emn178 · Accepted Answer · 2015-01-25 14:30:33Z

0

You can try my project jquery-lazyload-any

Html

<div id="you-want-lazyload">
  <!--
    <script>doSomething();</script>
  -->
</div>

JavaScript:

$('#you-want-lazyload').lazyload(options);

or other one jquery-appear

Html

<div id="you-want-to-detect">
</div>

JavaScript

$('#you-want-to-detect').bind('appear', doSomething); // you have to unbind event if you want to trigger only once

answered Jan 25, 2015 at 14:30

emn178

1,5028 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to lazy-load an inline javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related