相关疑难解决方法(0)

我正在使用几个插件,自定义小部件和一些来自JQuery的其他库.结果我有几个.js和.css文件.我需要为我的网站创建一个加载器,因为它需要一些时间来加载.如果我可以在导入所有之前显示加载器,那将是很好的:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/myFunctions.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet" />
... 
....
 etc

我找到了几个教程,使我能够异步导入JavaScript库.例如,我可以这样做:

  (function () {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'js/jquery-ui-1.8.16.custom.min.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    })();

出于某种原因,当我对我的所有文件做同样的事情时,页面不起作用.我一直在努力试图找到问题的所在,但我找不到它.首先我认为这可能是因为一些javascript函数依赖于其他函数.但是我使用超时功能以正确的顺序加载它们,当一个完成后我继续下一个并且页面仍然表现得很奇怪.例如,我无法点击链接等...动画仍然有效..

无论如何

这就是我一直在想的......我相信浏览器有一个缓存,这就是为什么第一次加载页面需要很长时间以及下次快速加载页面的原因.所以我想要做的是用一个异步加载所有这些文件的页面替换我的index.html页面.当ajax完成后,将所有这些文件重定向到我计划使用的页面.使用该页面时,加载时间不应太长,因为文件应该包含在浏览器的缓存中.在我的索引页面(异步加载.js和.css文件的页面)我不关心错误.我将只显示一个加载器并在完成后重定向页面...

这个想法是一个很好的选择吗？或者我应该继续尝试实现异步方法？

编辑

我加载所有异步的方式就像:

importScripts();

function importScripts()
{
    //import: jquery-ui-1.8.16.custom.min.js
    getContent("js/jquery-1.6.2.min.js",function (code) {
                var s = document.createElement('script');
                s.type = 'text/javascript';
                //s.async = true;
                s.innerHTML=code;
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
                setTimeout(insertNext1,1);
            });


    //import: jquery-ui-1.8.16.custom.min.js
    function insertNext1()
    {
        getContent("js/jquery-ui-1.8.16.custom.min.js",function (code) …

我读了教程: http://drnicwilliams.com/2006/11/21/diy-widgets/由Nic博士为XSS Widgets提供.

我正在寻找一种将参数传递给脚本标签的方法.例如,要进行以下工作:

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

有没有办法做到这一点？

更新:两个有趣的链接:

• 如何将依赖于jQuery的Javascript小部件嵌入到未知环境中(Stackoverflow讨论)
• 关于将参数传递给脚本标记的文章

我正在尝试编写一个超简单的解决方案来异步加载一堆JS文件.到目前为止,我有以下脚本.但是,当脚本未实际加载时,有时会调用回调,这会导致找不到变量错误.如果我刷新页面有时它只是工作,因为我猜文件是直接来自缓存,因此比调用回调更快,这是非常奇怪的？

var Loader = function () {

}
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); …

问题:
异步加载js文件,然后在执行加载文件的回调之前检查是否加载了dom.

编辑:我们不使用jQuery; 我们使用Prototype.
编辑:为代码示例添加了更多注释.

大家好,

我正在尝试异步加载我的所有js文件,以防止它们阻塞页面的其余部分.但是当脚本加载并调用回调时,我需要知道DOM是否已经加载,所以我知道如何构造回调.见下文:

//load asynchronously
(function(){
        var e = document.createElement('script'); 
        e.type = "text/javascript";
        e.async = true;
        e.src = srcstr; 
        // a little magic to make the callback happen
        if(navigator.userAgent.indexOf("Opera")){
            e.text = "initPage();";
        }else if(navigator.userAgent.indexOf("MSIE")){
            e.onreadystatechange = initPage;
        }else{
            e.innerHTML = "initPage();";
        }
        // attach the file to the document
        document.getElementsByTagName('head')[0].appendChild(e);
})();

initPageHelper = function(){ 
    //requires DOM be loaded
}

initPage = function(){
    if(domLoaded){ // if dom is already loaded, just call the function
        initPageHelper(); …

我想recaptcha在Vue.js组件安装后渲染一个。它可以正常加载和重新加载，但是当我导航到其他url浏览器并单击浏览器后退按钮时，它将引发错误。

这是我的设置：

• 我正在api页面底部加载脚本：

  <script src='https://www.google.com/recaptcha/api.js' async></script>

• 在该页面上，我渲染了一个名为的全局注册组件Contact.vue，其中包含一个名为的本地组件Recaptcha.vue：

  <app-recaptcha @recaptchaResponse="updateRecaptchaResponse"></app-recaptcha>

的代码Recaptcha.vue如下所示：

<template>
    <div id="app-recaptcha">
        <div :id="placeholderId"></div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                sitekey: 'key_here',
                placeholderId: 'grecaptcha',
                widgetId: null
            }
        },


        mounted() {
            this.$nextTick(function () {
                this.render();
            });
        },


        methods: {
            render() {
                this.widgetId = window.grecaptcha.render(this.placeholderId, {
                    sitekey: this.sitekey,
                    callback: (response) => {
                        this.$emit('recaptchaResponse', response);
                    }
                });
            },

            reset() {
                window.grecaptcha.reset(this.widgetId);
            }
        }
    } …