Question

我的格式中有几个div需要首先隐藏，即onLoad。问题是，当我把它放入<head>标签时，它将首先尝试执行并给出div具有值null的错误，当我将其包含在表单下方时，它可以完美地运行。例如

这个代码工作正常，因为JS代码放在下面。

<div class="error" id="name_error"><p>Input Name</p></div>
<input type="text" id="name" name="name" class="input-text" value="Enter Name..."/>

<script type="text/javascript">
     document.getElementById('name_error').style.display = 'none';
</script>

当我尝试将JS代码放在上面时它不起作用。

无论如何我可以将JavaScript代码放在head标签中，它应该在页面加载时隐藏div？

Answer 1

无论如何我可以放置 head标签中的JavaScript代码应该在页面时隐藏div 负载？

您需要将代码包装在onload事件中：

window.onload = function(){
  document.getElementById('name_error').style.display = 'none';
};

这样您就不会收到未定义的错误，因为当DOM可用以及其他页面资源时会触发onload事件。

Answer 2

不确定。只需将其置于加载事件中，如下所示：

window.addEventListener("load", function() {
    document.getElementById('name_error').style.display = 'none';
}, false);

Answer 3

您可能需要考虑使用jQuery。以下是它的编写方式。

$(function(){
    $('#name_error').hide();
});

$(function(){ });内的所有内容都将在加载DOM后执行，类似于window.onload，仅支持跨浏览器支持。

$('#name_error')就像使用css选择器语法document.getElementById('name_error')的快捷方式。

.hide();是将style.display设置为'none'的快捷方式。

编辑：非jQuery窗口加载。

在我发布这个答案之后，我记得Dustin Diaz关于最小DOMReady代码的帖子。使用他的代码，它看起来像这样。

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    document.getElementById('name_error').style.display = 'none';
});

在http://www.dustindiaz.com/smallest-domready-ever/

了解有关第1行的详情

Answer 4

我在这里遗漏了什么吗？为什么不将初始样式设为'display：none'？而不是将其保留为默认值，然后立即隐藏它。

Answer 5

在window.load事件中将显示设置为none可能会导致内容最初可见 - 在闪烁消失时闪烁。但是，正如所指出的那样，在呈现之前不能更改DOM元素的显示。

一个好的方法是使用Javascript（你可以在脑中做）在html元素上添加（或删除）一个类，并设置一个css规则，如果html标签设置了类，则隐藏你的元素。

请参阅：How to detect if browser JavaScript is off and display a notice以获取示例。

Answer 6

有不同的方法来推迟脚本的执行有很多答案，评论中有一些争议，所以我写了一点DEMO来比较所有这些的真正差异方法，因为它们肯定不相同。

对于那些不想看演示的不耐烦的人，这里有一些最重要的事情要记住为工作选择合适的工具：

window.onload = function（）{...};

适用于所有浏览器
删除所有以前的处理程序
仅在加载所有图像后才会触发

window.addEventListener（“load”，function（）{...}）;

它在Internet Explorer中不起作用
仅在加载所有图像后才会触发

jQuery（document）.ready（function（）{...}）;

适用于所有浏览器
一旦DOM准备好就会激活

只是为了好奇，这就是jQuery实际上正在做的事情，以确保你的处理程序在DOM准备好后立即解雇并在浏览器中工作：

// Handle when the DOM is ready
ready: function( wait ) {
    // A third-party is pushing the ready event forwards
    if ( wait === true ) {
        jQuery.readyWait--;
    }

    // Make sure that the DOM is not already loaded
    if ( !jQuery.readyWait || (wait !== true && !jQuery.isReady) ) {
        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
        if ( !document.body ) {
            return setTimeout( jQuery.ready, 1 );
        }

        // Remember that the DOM is ready
        jQuery.isReady = true;

        // If a normal DOM Ready event fired, decrement, and wait if need be
        if ( wait !== true && --jQuery.readyWait > 0 ) {
            return;
        }

        // If there are functions bound, to execute
        readyList.resolveWith( document, [ jQuery ] );

        // Trigger any bound ready events
        if ( jQuery.fn.trigger ) {
            jQuery( document ).trigger( "ready" ).unbind( "ready" );
        }
    }
},

bindReady: function() {
    if ( readyBound ) {
        return;
    }

    readyBound = true;

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},

我将它作为一个例子展示，如果你需要它可以在所有浏览器上运行而且如果某些图像或广告加载有延迟，那么像文档就绪处理程序这样的东西可能实际上非常复杂。 / p>

无论如何我可以将这个javascript代码放在head标签中？

6 个答案:

window.onload = function（）{...};

window.addEventListener（“load”，function（）{...}）;

jQuery（document）.ready（function（）{...}）;