How to Make the Browser Wait to Display the Page Until It's Fully Loaded

Don't show page until content has fully loaded

translate.process() is asynchronous code which needs to make a call to a server and wait for its response. What it means is that, when you call this function, it goes in the background to go do its own thing while the rest of the page continues loading. That is why the user sees the page while this function is still running.

One minimal way I can think around this is by adding this to your css files in the head tag.

body { display: none }

And then, under this.process function, after the for loop ends, add

document.body.style.display = 'block'

How to Wait until page is fully loaded

By default, Cypress will wait for your page to load all resources before continuing the test. Your cy.wait() shouldn't be necessary. The default timeout for cy.visit() is 60 seconds.

Also, cy.get() will retry finding your element until the element exists. The default timeout is 4 seconds, but you can increase it.

Something like this is generally all you need:

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.get('button').contains('Create').click()

If you find that this isn't working, perhaps because your page takes more than 4 seconds to render after it loads all resources, then you can do something like this:

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    // wait up to 30 seconds for some element to exist before continuing the test
    cy.get('.some-element-in-your-app-that-only-exists-once-page-has-loaded', { timeout: 30000 })
    cy.get('button').contains('Create').click()

In general, you shouldn't ever need to use cy.wait() to delay your tests by a certain number of milliseconds. Doing so is almost always a bad practice.

Hide page until it's all loaded

jQuery

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

Immediately following your tag add something like this...

 <style> body  {opacity:0;}</style>

And for the very first thing in your add something like...

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

All these answers are from How can I make the browser wait to display the page until it's fully loaded?

Hide page until everything is loaded Advanced

Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.

Put a div on top, like so:

<div id="cover"></div>

set some styles:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

and hide it with JS when all elements are loaded:

$(window).on('load', function() {
   $("#cover").hide();
});

Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!

$(window).on('load', function() {    $("#cover").fadeOut(200);});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW(){    $(window).load();}setTimeout(newW, 1000);

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;     font-size: 60px; text-align: center; padding-top: 200px; color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>    <li>This</li>    <li>is</li>    <li>a</li>    <li>simple</li>    <li>test</li>    <li>of</li>    <li>a</li>    <li>cover</li></ul>
<div id="cover">LOADING</div>

How to delay displaying of page content until page is completely loaded including scripts and styles

You could hide the elements via CSS, and then, after the whole page is loaded, display the first one.

Regarding the loading message, add an element containing it, which you can hide (or remove) as soon as the page is fully loaded.

HTML:

<div id="loading">Loading, please wait...</div>
<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>

CSS:

.divs_nav {
    display: none;
}

JavaScript:

$(document).ready(function(){
    $('#loading').hide();
    $('.divs_nav').first().css('display', 'block'); //or whatever display value you want
});

DEMO: http://jsfiddle.net/Zzg5M/

Puppeteer wait until page is completely loaded

You can use page.waitForNavigation() to wait for the new page to load completely before generating a PDF:

await page.goto(fullUrl, {
  waitUntil: 'networkidle0',
});

await page.type('#username', 'scott');
await page.type('#password', 'tiger');

await page.click('#Login_Button');

await page.waitForNavigation({
  waitUntil: 'networkidle0',
});

await page.pdf({
  path: outputFileName,
  displayHeaderFooter: true,
  headerTemplate: '',
  footerTemplate: '',
  printBackground: true,
  format: 'A4',
});

If there is a certain element that is generated dynamically that you would like included in your PDF, consider using page.waitForSelector() to ensure that the content is visible:

await page.waitForSelector('#example', {
  visible: true,
});

Wait for image to be fully loaded before displayed on page?

What comes to mind without actually used or tested it is wrapping the image. I'll use jQuery for the sample

<div class="loading"><img/></div>

CSS could be

.loading { display: inline-block; }
.ie6 .loading, .ie7 .loading { display: inline; } /* these could be set by http://www.modernizr.com/ */
.loading img {
     visibility: hidden;
     background: url('path/to/loading.gif') center center no-repeat transparent;
     vertical-align: bottom; /* or display: block; to kill the inline white space */
}

JavaScript (jQuery)

  $(function(){
    $('.loading img').load(function(){
         $(this).css('visibility','visible');
    });
   });