Question

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

在我的一个主要登陆页面上，用户进入漏洞，我有一些互动（例如一个按钮，让我们称之为“点击我按钮”），这取决于该脚本 - 事件处理程序等。换句话说，在下载并加载脚本之前，按钮不执行任何操作：例如空href。

目前，如果在旧版浏览器或慢速连接上进行测试，用户可能会在脚本加载完成之前看到所有或大部分DOM，包括“单击我按钮”。因此，有一个延迟（有时长达几秒），点击此按钮什么都不做。

我想知道：

是否有一种方法来构建这个，这样我就可以消除按钮显示到可点击之间的延迟（通过JS交互）。请记住，此页面的所有脚本都连接成一个文件。我总是可以尝试减少文件的大小，但这仍然是错误的，因为理论上可能存在延迟。

我的描述中还有其他什么东西可以说是不受欢迎的架构。例如，可能给按钮一个默认的，非js依赖的行为，这样如果用户确实立即点击它会发生一些事情 - 这也有点奇怪，因为有两种不同的行为取决于用户点击的速度有多快按钮。

Answer 1

一个可能的解决方案可能是使用单独的JS函数来隐藏有问题的按钮UNTIL依赖于较大的JS文件已加载。使用类似on.load（＆＃39;您的JS文件）命令以及该特定按钮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
    }

取决于缓慢加载javascript的UI

2 个答案: