locked
How to hide all page elements until the last element had rendered RRS feed

  • Question

  • User1868852945 posted

    Is there a way to keep all page elements hidden (display: none;) until the very last element has rendered?  Our razor page populates multiple panels with multiple backend queries and I would like to avoid partial page displaying until everything is ready.  

    Sounds like a poor design, but our Controler's Repossitory class pulls from both Oracle and SQL Server, so we do have this issue and maybe the only way is for a javascript event on the last panel to change all other panels to display: block; ?  

    I do not see any ondisplay event for the element?

    Thanks for any advice.

    Sunday, February 28, 2021 2:38 AM

Answers

  • User-474980206 posted

    Unless you are using Ajax to fetch the panels, the controller will not send any html to the browser unless all the html has been produced at the server. It does not matter how long each panel takes to build on the server, the browser does not start in until the server has produced all of them and sends the the page to the browser. If you don’t like the render, then use the browsers debug tools to determine which markup is causing renders. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 1, 2021 4:22 PM

All replies

  • User1312693872 posted

    Hi,gunderj

    how did you render the very last element? A click or a link or ...?

    until the very last element has rendered?

    To hide and then show the div after all the div is showed, you can do like this:

    <div class="text-center" id="welcome" style="display:none">
        <h1 class="display-4">Welcome</h1>
        <h1 class="text" id="p2" style="display:none">Welcome2</h1>
    </div>
    
    @section Scripts
    {
    <script>
        $(document).ready(function () {
            if (document.getElementById("p2").style.display == "block")
            {
                document.getElementById("welcome").style.display = "block";
            }      
        });  
    </script>
    }
    

    Best Regards,

    Jerry Cai

    Monday, March 1, 2021 5:21 AM
  • User1868852945 posted

    Thanks Jerry,

    Unfortunately this does not work because the last element (p2) starts out as display none and will never be block.  Were you assuming that I already have some logic that changes it from none to block?  It would only work if there was a trigger event such as ondisplay or onrender.  Can we know of some trigger event of when the element on the page is displayed?  

    Monday, March 1, 2021 2:59 PM
  • User-474980206 posted

    Unless you are using Ajax to fetch the panels, the controller will not send any html to the browser unless all the html has been produced at the server. It does not matter how long each panel takes to build on the server, the browser does not start in until the server has produced all of them and sends the the page to the browser. If you don’t like the render, then use the browsers debug tools to determine which markup is causing renders. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 1, 2021 4:22 PM