admin管理员组

文章数量:1399747

I have a load of images being pulled from Wordpress attachments and then dumped on the page using a masonry grid of sorts - all good. However, it takes a little long.

Is there any way to display a div, with some text, as the page is loading, and then display: none, after?

I have this so far:

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

and my CSS,

#loading-grid-page {
color: #ffffff;
font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
border-radius: 2px;
border: 1px solid #111111;
padding: 5px 30px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
z-index: 1000000;
}

However it throws back mixed results, sometimes it waits and all the masonry works, and sometimes it doesn't and the masonry fails and the page loads strangely.

Just wondered if there was anything else out there ;)

Thanks, R

I have a load of images being pulled from Wordpress attachments and then dumped on the page using a masonry grid of sorts - all good. However, it takes a little long.

Is there any way to display a div, with some text, as the page is loading, and then display: none, after?

I have this so far:

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

and my CSS,

#loading-grid-page {
color: #ffffff;
font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
border-radius: 2px;
border: 1px solid #111111;
padding: 5px 30px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
z-index: 1000000;
}

However it throws back mixed results, sometimes it waits and all the masonry works, and sometimes it doesn't and the masonry fails and the page loads strangely.

Just wondered if there was anything else out there ;)

Thanks, R

  • javascript
  • jquery
  • load
  • jquery-masonry
Share Improve this question asked Jan 3, 2012 at 18:01 John the PainterJohn the Painter 2,6158 gold badges64 silver badges105 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 2

I would do it this way:

  1. Load an empty page and display a loader.
    first time when you load the method just load (y) images, per example 12 will be enough. Don't load all of them.

  2. Use (JQuery) Ajax to load the content.

    Use ajax/json to connect to the server and count the number of images left( total - displayed). if (total > 0) then return links to those images as a json array.

    link to jquery's json call. link to parsing json using PHP.

  3. Hide the loader.

    Hide the div that contain the loader and add the links to the content div.

  4. Display the content.

    Here you have two options append a div, or use an existing one but this depends on the way you implemented the code, again I remend JQuery.

This is one great use for JQuery, if you want code to run when the page is loaded, do this:

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

You can use ded's domready event to hide the overlay when the DOM is ready.

Follow these steps:

  1. Create a Div Like below below body tag
  2. Include Ext Js library on head as script

  3. creat a script tag and write down below lines within script tag

    var Mask; function loadMask(el,flag,msg){ Mask= new Ext.LoadMask(Ext.get(el), {msg:msg}); if(flag) Mask.show(); else Mask.hide(); }

  4. call function beforeload on body tag and call your function loadMask as below javascript:loadMask('myLoading',true,'Loading ...')

  5. call function onload on body tag and call javascript:loadMask('myLoading',false,'Loading ...')

if step 4 not working then create a new function unloadMask and within this function write below code and call this function on onload of body tag

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

本文标签： javascriptDisplay div while page loads (all JS and HTMLCSS)Stack Overflow

版权声明：本文标题：javascript - Display div while page loads (all JS and HTMLCSS) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744136109a2592402.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。