代码之家 › 专栏 › 技术社区 › user2081892

延迟Javascript或div直到页面加载

pageload delay settimeout html javascript

user2081892 · 技术社区 · 12 年前

我一直在寻找解决方案,尝试了一些建议,但似乎都不适用于我现有的脚本,或者对解决方案不太理解,所以希望有人能提供帮助。

在head标记中,我得到了下面的javascript脚本。它将页面上的第8个div从底部向上滑动到页面中。然而,当您访问页面时,在它滑入页面之前,您可以快速浏览这个div(一个文本块)在其结束位置的内容。如何摆脱这种快速预览,并在加载主图像时让文本块div滑入?

链接到站点: http://www.estilosalon.com.au/estilo-salon-philosophy2.html

<script type="text/javascript">
i=-700;
var c;
function f(){
    c=setInterval(function(){inv()},5)
}
function inv()
{
    if(i!=0)
    {
        i+=5;
        document.getElementsByTagName("div")[8].style.bottom=i+"px";
    }
    else
    {
        clearInterval(c);
        document.getElementsByTagName("button")[0].parentNode.removeChild(document.getElementsByTagName("button")[0]);
    }
}
</script>

提前谢谢!

2 回复 | 直到 12 年前

darshanags 12 年前

您可以尝试以下操作:

将类添加到您的 <html> 标记为没有js时的回退:

<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">

更换 no-js 与一起上课 js 通过将此代码放在 i=-700; 线

var html = document.documentElement;
html.className=html.className.replace(/\bno-js\b/,'') + 'js';

将此添加到样式表中

html.js #text_box_philosophy{
    bottom: -700px;
}

Jacob Dalton 12 年前

您可以将函数附加到身体的负荷事件 <body onload="f()"> 并将div[8]设置为 display: none 在css中,然后将其设置为 document.getElementsByTagName("div")[8].style.display = "block" 在里面 f() .

然而,我强烈考虑使用jQuery和 $().animate 函数来设置div的动画,为div分配一个id(如果添加更多 div 元素之前,您的代码将中断),并使用jQuery的 $(document).ready() 函数来激发初始代码,而不是使用 <body onload=""> 。采取这些步骤将有助于您的代码在多个浏览器中统一执行。