依赖于缓慢加载javascript的UI

Question

我为某个页面编写的所有脚本都被连接/优化（requireJS）到一个文件中。目前，我的脚本需要一段时间才能加载，具体取决于浏览器和网络连接，因为它大约为0.5 MB。

在我的一个主要登录页上，用户被集中到那里，我有一些依赖于脚本的交互（例如，一个按钮，让我们称之为"点击我按钮"）-事件处理程序等。换句话说，在脚本下载和加载之前，按钮什么都不做：例如，一一个空的href。

目前，如果在旧浏览器或慢速连接上进行测试，用户可能会在脚本加载完成之前看到所有或大部分DOM，包括"click me button"。因此，点击这个按钮会有一个延迟（有时长达几秒钟），而点击这个按钮根本没有任何作用。

我想知道：

1. 有没有一种方法可以构建它，这样我就可以消除从按钮显示到按钮可点击之间的延迟（通过JS交互）。请记住，此页面的所有脚本都连接到一个文件中。我总是可以尝试缩小文件的大小，但这仍然感觉不对，因为理论上总是存在可能的滞后
2. 在我的描述中，还有什么突出的不受欢迎的建筑吗。比如给按钮一个默认的、不依赖js的行为，这样如果用户点击它，就会立即发生一些事情——这也感觉有点奇怪，因为根据用户点击按钮的速度，会有两种不同的行为

Answer 1

一个潜在的解决方案可能是使用一个单独的JS函数来隐藏有问题的按钮，直到加载依赖的较大JS文件为止。将类似于on.load（'yourJS文件）命令的内容与特定按钮DIV.上的隐藏css类结合使用

   onload=function() {
     document.getElementById('BUTTON').className='visible';
}

您还可以考虑将有问题的JS函数分离出来，并在DOM准备好后立即加载它。document.ready，以便在后台仍在加载其他UI和JS功能时，保证此特定功能可用。

根据你的描述，不确定这两种方法在你的特定情况下是否可行，但我会考虑。此外，您是否缩小了有问题的网页/CSS/JS代码以帮助缩短加载时间？你的文件大小似乎很大，你是否包括了不需要的公共库？

Answer 2

我的应用程序中也有同样的情况，我在登录页上向用户显示一个登录按钮。但是这个按钮还不能使用，因为JS还没有下载。当用户点击按钮说应用程序正在初始化时，我只需显示一个掩码，然后等待文件下载，在文件中我隐藏了掩码（不管之前是否显示）。

对于您的情况，我又添加了一个标志（全局变量），表示是否单击了按钮。当用户点击按钮时设置该标志，然后在下载的文件中使用该标志检查用户是否点击了按钮，然后在点击按钮时执行您想做的任何操作。

在您的index.html 中

    var initializationComplete = false;
    var buttonClicked = false;
    function doStuff() {
        if (!initializationComplete) {
            showMask('Initializing App...'); 
            buttonClicked = true;
        }
    }
    document.getElementById('click-me-button').onclick = doStuff;
    function showMask(textToShow) {
        var mask = document.getElementById('mask')
        mask.style['z-index'] = 32767;
        mask.style['display'] = "";
        mask.innerHTML = textToShow;
    }
    function hideMask() {
        var mask = document.getElementById('mask')
        mask.style['z-index'] = 0;
        mask.style['display'] = "none";
        mask.innerHTML = "";
    }

在你的脚本准备好做这些事情之后，在里面。

    hideMask();
    initializationComplete = true;
    if(buttonClicked){
         buttonEventHandler();
    }
    function buttonEventHandler(){
       //Do button click stuff here
    }