Java脚本 - 隐藏按钮直到页面加载

我已经构建了一个水平滚动网站。我并不十分了解Java Script，但我下载了一个名为Horizontal Tiny Scroller的脚本，它可以让您在不使用滚动条的情况下水平滚动网站。Java脚本 - 隐藏按钮直到页面加载

除了脚本只在页面上的其他内容加载完成后才加载，所有内容都可以完美运行。由于我的网站拥有大量图形，因此滚动条按钮不会立即生效，因此具有可用性。我猜大多数用户会认为按钮被破坏。

经过一番研究，我发现没有办法在图形之前加载按钮，所以我只需要隐藏按钮，直到页面加载完毕。

的小滚轮脚本使用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，那么一切都可以再次运行（但当然这些按钮在页面加载完成之前就会出现）。

有没有人有任何指针，我做错了什么？

来源

2010-07-17 big_smile

您可能会覆盖该库设置的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处理已经设置的，如果它不会覆盖它。

来源

2010-07-17 11:05:07 bluesmoon

非常感谢mwilcox和bluesmoon！连接onload比我的技能高一点，所以我使用bluesmoon的建议，它的工作原理非常完美。但是，我希望将来能够学习Java脚本，因此会对mwilcox的建议采取另一种措施。谢谢！ – 2010-07-17 19:09:20

我推荐你连接来代替覆盖吧。

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

来源

2010-07-17 15:50:30 mwilcox

Java脚本 - 隐藏按钮直到页面加载

回答

相关问题