Prevent the page from being displayed only when all elements of the page are loaded

Asked

Viewed 33 times

0

I have a page in html, in which I list data, this part is like this:

        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>Item 1</th>
                    <th>item 2</th>
                    <th>item 3</th>
                    <th>item 4</th>
                </tr>
            </thead>

            <tbody>
                {% for item in itens %}
                <tr>
                    <td><a href=""><img src="{{ item.att1 }}" width="50px" /></a></td>
                    <td><a href=""><strong>{{ item.att2 }}</strong></a></td>
                    <td><strong>{{ item.att3 }}</strong></td>
                    <td><strong style="color: green">{{ item.att4 }}</strong></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

I am using Django in my application.

The problem is this: the data that is being listed, is captured in the back end and comes from an external server, which often delays the page loading a lot.

What I wanted to do was load the entire page (except the table), and while that could put any message to the user. And only then when all items were loaded, the table would be displayed.

I have been researching but found nothing related. Someone could help me?

javascript front-end

  • the table comes from an external server right? and you take this table via javascript, right? then you could do the old $(Document). ready( Function() { });

1 answer

1


So Naldson, for you to do this the solution is you load this table with an asynchronous call via Javascript, IE, when the page is loaded your Javascript makes an Ajax request to the server, your or external, it goes from your architecture, and when you get this server response you mount the table by adding the rows and columns of it with Javascript as well.

So if you find this work massive, try to study some Javascript lib that facilitates this work like jQuery, component frameworks like React or Vue.js, other very interesting frameworks like Angularjs and Aurelia.

Browser other questions tagged javascript front-end

You are not signed in. Login or sign up in order to post.