All geek questions in one place

Display div when loading pages (all JS and HTML / CSS)

I have loading images that are pulled from Wordpress attachments and then dumped onto a page using a grid of masonry - all is well. However, this takes a little time.

Is it possible to display a div with some text when the page loads, and then display: none, after?

I still have this:

<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 discards mixed results, sometimes it waits, and all the masonry works, and sometimes not, and the masonry fails, and the page loads weirdly.

Just wondering if there is anything else;)

Thanks R

+4
source share
4 answers

I would do it like this:

  • Download a blank page and display the bootloader.

    the first time you upload only uploaded (y) images, for example 12 will be enough. Do not download them all.

  • Use (jQuery) Ajax to load content.


    Use ajax / json to connect to the server and count the number of remaining images (total number is displayed). if (total> 0), then return the links to these images as a json array.

    jquery reference json call . link to json parsing using PHP .

  • Hide bootloader.

    Hide the div containing the loader and add links to the content div.

  • Display content.

    Here you have two options: add a div or use an existing one, but it depends on how you implemented the code, I recommend jQuery again.

+2
source

This is one great use for jQuery, if you want the code to run when the page loads, do the following:

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

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

0
source

Follow these steps:

  • Create div As below body tag
  • Include Ext Js library on the head as a script

  • Create a script tag and write below the line in the script tag

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

  • calling the beforeload function on the body tag and calling the loadMask function as shown below javascript: loadMask ('myLoading', true, 'Loading ...')

  • calling the onload function on the body tag and calling javascript: loadMask ('myLoading', false, 'Loading ...')

If step 4 does not work, then create a new unloadMask function and inside this function write the code below and call this function when loading the body tag

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

Source: https://habr.com/ru/post/1389123/

More articles:


All Articles