页面加载后加载简单的JS代码

Loading simple JS code after page loads?

本文关键字：加载 JS 代码 简单      更新时间：2023-09-26

页面加载后，是否有方法加载JavaScript代码（而不将其放在HTML文档的最底层）？下面是脚本示例：

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=x&source=user&user=XXX"></script>

PS。原因是上面的Flickr代码加载缓慢，同时挂起了网站。

你可以试试

<script type="text/javascript">
// Use any event to append the code
$(document).ready(function() 
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "test.js";
    // Use any selector
    $("head").append(s);
});
</script>

当然，这将需要jquery库，否则您可以将此代码粘贴到body的onload方法上

这是一些有用的

无法在URL上同步执行脚本。请进一步注意，当涉及网络（甚至文件系统！）时，同步任何东西都是一个坏主意。某个人，某个时候，某个地方将处于慢速系统或慢速网络上，或者两者兼而有之，突然你在这个过程中挂起了他们的UI

http://bugs.jquery.com/ticket/6557

或者你可以试试

http://yepnopejs.com/

将其应用于主体的onload方法。

如果您想在整个页面（包括所有元素）加载完成后加载脚本，请尝试此操作。（jQuery）

$(window).load(function() {
        var js, 
            id = 'SCRIPT-ID', 
            ref = document.getElementsByTagName('script')[0];
        if (document.getElementById(id)) {
            return;
        }
        js = document.createElement('script'); 
        js.id = id; 
        js.async = true;
        js.src = "http://www.website.com/script.js";
        ref.parentNode.insertBefore(js, ref);
    });

如果您希望它在DOM渲染后加载，只需将$(window)更改为$(document)

var asyncLoad = function (url) {
    if (typeof url !== 'string') {
        return false;
    }
    var script = document.createElement('script'),
        firstScript = document.getElementsByTagName('script')[0];
    script.setAttribute('src', url);
    firstScript.parentNode.insertBefore(script, firstScript);
    return script;
};

//或者，对于无脚本的页面，只需添加到标题；

var asyncLoad = function (url) {
    if (typeof url !== 'string') {
        return false;
    }
    var script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0];
    script.setAttribute('src', url);
    head.appendChild(script);
    return script;
};

//应用：

document.addEventListener('DOMContentLoaded', function () {
    asyncLoad('script_url');
});

如果您需要脚本的模块化执行，您可以使用以下库

http://headjs.com/

相关文章：