如何延迟加载内联 javascript？

Question

我只想在达到特定 div 时加载横幅广告脚本。例如 - 页面底部的横幅 div。

我可以使用 jquery 惰性脚本加载外部脚本：

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

    }
};
$.lazyscript(options);

但是如何加载内联脚本？

谢谢。

Answer 1

整个 html 文档从上到下解析，包括脚本标签。因此，从这个意义上说，您的内联 javascript 是 "loaded." 我可能误解了您的问题。

如果您不希望内联脚本在解析后立即执行，您需要在内联脚本中使用某种事件侦听器。

例如，假设您的内嵌横幅广告代码封装在一个函数中

<script>
loadBannerScriptAd()
</script>

你需要这样写

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

您可以随时通过

触发

$(document).trigger("loadBannerScript")

所有这一切都假设你有 jquery 基于你上面给出的代码示例。查看 http://api.jquery.com/trigger/ 了解有关如何通过 jquery.

触发自定义事件的详细信息

Answer 2

你可以试试我的项目jquery-lazyload-any

Html

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

JavaScript:

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

或另一个 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

如何延迟加载内联 javascript？

How to lazy-load an inline javascript?

javascript

lazy-loading