javascript - Javascript - 在页面加载之前保持按钮隐藏

Question

我建立了一个水平滚动网站。我对 Java 脚本了解不多，但我下载了这个名为 Horizo​​ntal Tiny Scroller 的脚本，它可以让您水平滚动网站，而无需使用滚动条。

一切都很完美，除了脚本仅在页面上的其他所有内容完成加载后才加载。由于我的网站有大量图形，因此滚动按钮不会立即起作用，因此这会产生可用性。我猜大多数用户会认为按钮坏了。

经过一番研究，我发现没有解决方案可以使按钮在图形之前加载，因此我只需隐藏按钮，直到页面加载。

Tiny Scroller 脚本使用 document.writeln 命令使按钮出现在页面上:

document.writeln('<a href="javascript://" id="left-arrow"></a>\n<a href="javascript://" id="right-arrow"></a>');

使用在线教程，我创建了两个 CSS 类:.visible {display:block;} & .hidden {display:none;}。我重写了 document.writeln 命令，因此默认情况下为按钮分配了 .hidden 类:

document.writeln('<a href="javascript://" id="left-arrow" class="hidden"></a>\n<a href="javascript://" id="right-arrow" class="hidden"></a>');

最后，我编写了一个 onload=function 将 .hidden 类与 .visible 类交换:

onload=function() {
     document.getElementById('left-arrow').className='visible';
     document.getElementById('right-arrow').className='visible';
}

完成的脚本可见here

一切正常，按钮仅在页面加载时出现。但是，滚动功能不再起作用了!如果我删除 onload=function 一切都会恢复正常(但当然按钮会在页面完成加载之前出现)。

有人可以指出我做错了什么吗？

Answer 1

您可能会覆盖库设置的 onload 处理程序。这可能不是完成您需要做的事情的最佳方法，但考虑到您是 Javascript 新手，我们将尽力使其发挥作用。

将您的 onload 处理程序更改为:

function handler() {
    document.getElementById('left-arrow').className='visible';
    document.getElementById('right-arrow').className='visible';
}

var old_onload = window.onload;
window.onload = function() {
    handler();
    if(old_onload) {
        old_onload();
    }
};

这将检查 onload 处理程序是否已设置，如果已设置，则不会覆盖它。