Question

我已经建立了一个水平滚动网站。我对Java Script并不是很了解，但是我下载了这个名为Horizontal 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处理程序，如果有，则不会覆盖它。

Answer 2

我建议你连接到onload而不是覆盖。

if(window.attachEvent){ //IE
    window.attachEvent("onload", myChangeVisFunc);
}else{
    window.addEventListener("load", myChangeVisFunc, false);
}

Javascript - 保持按钮隐藏，直到页面加载

2 个答案: