延迟 Javascript 或 div 直到页面加载答案

【问题标题】：Delay Javascript or div until page load延迟 Javascript 或 div 直到页面加载
【发布时间】：2013-02-18 07:33:05
【问题描述】：

我一直在寻找解决方案，尝试了一些建议，但似乎没有一个适用于我拥有的脚本或无法正确理解解决方案，因此希望有人可以提供帮助。

在 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>

提前致谢！

【问题讨论】：

你控制标记吗？通过id 而不是通过页面中的计数来获取 div 可能会更好。
你可以在 javascript 接触它之前让它不可见。还可以考虑将脚本移到元素之后，这样您就不必使用等待循环。
也许在动画之前为 div 设置简单的bottom: -700px;...已经有一个内联的style 属性，这是个好地方。
刚试了-700px；你提姆的建议，这似乎行得通。我已将您的更改上传到 estilosalon.com.au/estilo-salon-philosophy3.html。也许我会选择这个选项，因为涉及的代码比 darshanags 的建议少。不过，很好奇 class="no-js" 作为标准包含在任何网页中是否是件好事？
感谢 Jacob 的建议，虽然我不知道如何在 Javascript 中更改它以反映这一点，但我也想到了这一点。看起来我已经为我的问题找到了一些很好的解决方案，但无论如何谢谢。 Jan，我尝试将脚本放在代码的末尾，但这似乎没有奏效。不知道如何在 Javascript 触及它之前进行隐藏，也不确定等待循环的事情，从其他地方得到这个 javascript，我自己没有写。谢谢

标签： javascript html settimeout delay pageload

【解决方案1】：

您可以尝试以下方法：

在你的<html>标签中添加一个类作为没有js时的后备：

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

将此代码放在i=-700; 行之前，将no-js 类替换为js 类

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

将此添加到您的样式表中

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

【讨论】：

您好，感谢您如此迅速地回复。我已经尝试过你的指示，它似乎奏效了！只是为了和你核实一下我是否做对了；我将 '' 更改为 w3.org/1999/xhtml" class="no-js">' 并将 'var html' 代码放在 'i=-700;' 之前并将最后一位添加到样式表中。我只是不确定'在你的 js 中，用 js 类替换这个 no-js 类'是什么意思，不知道如何阅读。已上传更改，以便您在 estilosalon.com.au/estilo-salon-philosophy2.html 上查看。再次感谢！
@zalia 对我的语法感到抱歉，当我写下这些步骤时，我很着急。我在上面的回答中更正了这一点。我的意思是您需要使用我指定的代码将no-js 类替换为js。我看到您已经添加了另一个 <script> 标记来添加我的代码，虽然这有效但没有必要 - 您可以将两行添加到您已经拥有的 <script> 标记的顶部。我在控制台中看到一个错误，您可能需要检查一下。此外，如果这回答了您的问题，最好将其标记为已回答。
我在已有的标签中添加了两行脚本。对于我是否需要在 html 标记中添加 no-js 或 js 或根本不添加任何内容仍然有点困惑。我已经删除了它，它似乎可以工作，但也许我应该添加no-js 或js？！如果你能让我知道那就太好了。非常感谢您帮助我，经过几个小时的尝试，确实令人沮丧，很高兴知道周围有像您这样的人可以提供帮助。我现在将其标记为已回答，只是想尝试大家的建议:-)
no-js 可以帮助您在最终用户的浏览器中没有 javascript 的情况下设置任何样式 - 它就像一个辅助类。该代码可以在没有<html> 标签中的no-js 类的情况下工作，但将其保留在那里并没有什么坏处。我提供的代码是modernizr的摘录，有兴趣的可以去看看：modernizr.github.com/Modernizr/annotatedsource.html#section-103
为此干杯。我已经为该页面添加了书签，以便有时间可以参考。无法告诉你我是多么感激这个问题现在已经解决了:-) Ta！

【解决方案2】：

您可以将函数附加到主体的加载事件<body onload="f()"> 并在您的CSS 中将div[8] 设置为display: none，然后在f() 中将其设置为document.getElementsByTagName("div")[8].style.display = "block"。

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

【讨论】：

我明白你的观点，即 jQuery 将是首选方法，我会研究它，但在这个阶段，我将采用其他建议的修复方法。我试图应用你所说的，我想我在哪里插入“document.getElements ....”错误，看看我是怎么理解的：estilosalon.com.au/estilo-salon-philosophy4.html。感谢您抽出宝贵时间，Jacob。