Javascript 页面加载时显示div（所有JS和HTML/CSS）_Javascript_Jquery_Load_Jquery Masonry

Javascript 页面加载时显示div（所有JS和HTML/CSS）

javascript jquery

Javascript 页面加载时显示div（所有JS和HTML/CSS）,javascript,jquery,load,jquery-masonry,Javascript,Jquery,Load,Jquery Masonry,我从Wordpress附件中提取了大量图像，然后使用各种砖石网格将其转储到页面上——一切都很好。然而，这需要一点时间有没有办法在页面加载时显示带有一些文本的div，然后在加载后显示：none 到目前为止，我有： <script type="text/javascript"> function showContent(){ //hide loading status... document.getElementById("loading-grid-page").style.displ

我从Wordpress附件中提取了大量图像，然后使用各种砖石网格将其转储到页面上——一切都很好。然而，这需要一点时间

有没有办法在页面加载时显示带有一些文本的div，然后在加载后显示：none

到目前为止，我有：

<script type="text/javascript">
function showContent(){
//hide loading status...
document.getElementById("loading-grid-page").style.display='none';

//show content
document.getElementById("content").style.display='block';
}
</script>
</head>
<body onload="showContent()">
<script type="text/javascript">
document.write('<div id="loading-grid-page">Fetching ALL the gold...</div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>

然而，它抛出了混合的结果，有时它等待，所有的砖石工程，有时它没有，砖石工程失败，页面加载奇怪

只是想知道外面还有没有别的东西；）

谢谢，

这是JQuery的一个重要用途，如果希望在加载页面时运行代码，请执行以下操作：

$(window).load(function(){
    //hide loader div here
    $("#loading-grid-page").hide();
});

我会这样做：

加载空页面并显示加载程序。
第一次加载该方法时，只需加载（y）个图像，根据示例12即可。不要全部加载

使用（JQuery）Ajax加载内容

使用ajax/json连接到服务器，并计算剩余图像的数量（显示总数）。如果是（总数>0），则将这些图像的链接作为json数组返回

链接到jquery的。链接到

隐藏加载程序

显示内容。

这里有两个选项附加一个div，或者使用一个现有的div，但这取决于您实现代码的方式，我再次推荐JQuery

当DOM就绪时，您可以使用ded的事件隐藏覆盖。

遵循以下步骤：

在body标记下方创建一个Div

将ExtJS库作为脚本包含在头部

创建一个脚本标记，并在脚本标记的下面几行写下

var掩模；函数加载掩码（el、标志、消息）{ Mask=new Ext.LoadMask（Ext.get（el），{msg:msg}）；国际单项体育联合会（旗） Mask.show（）；其他的 Mask.hide（）； }

在body标签上调用函数beforeload并调用函数loadMask，如下所示 javascript:loadMask（'myLoading'，true，'Loading…'））

在body标记上调用onload函数并调用javascript:loadMask（'myLoading'，false，'Loading…'））

如果步骤4不起作用，则创建一个新函数unloadMask，并在该函数中编写以下代码，并在body标记加载时调用该函数

function unloadMask(){ 
 Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}

嗯，这方面的任何进一步帮助都会很好；）你可以看到这个想法在这里起作用：-但你也会看到它失败了！谢谢你迄今为止的帮助！我看不到您的代码，所以我不打算编写任何代码，但我将尝试从web上为您提供一些示例。我只需要在页面完全加载时显示内容，并在加载时显示#加载网格页面。您可以在此处看到我的尝试：-感谢您的帮助：）然后将内容的可见性设置为折叠，并在加载函数中使用：$（“#content”）.css（“可见性”，“可见”）将其设置为可访问；不要使用显示：无，因为在某些浏览器上，它不会加载内容。隐藏覆盖是好的，它实际上是隐藏除覆盖之外的所有内容，直到内容准备就绪，然后再显示。没问题，然后隐藏内容并在domready上显示。但是如果禁用JS，则不会加载任何内容？或者你的意思是，也用JS隐藏它？不清楚你的页面是如何设置的。如果您有jQuery，并且您的内容是动态加载的，那么没有JS它就无法工作。在本例中，您应该只使用imagesLoaded和jQuery的standard.ready事件之类的内容。如果您的内容没有动态加载，那么您应该使用.ready单独显示内容，并在加载时立即使用jQuery隐藏内容。

function unloadMask(){ 
 Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}