A
A
Andrey Bely2021-04-07 12:11:44
AJAX
Andrey Bely, 2021-04-07 12:11:44

How to show a stub while the content is loading?

Good afternoon everyone!
The customer asked to attach a third-party script to his site, the essence:
The script loads an iframe in which its document with divs and other html attributes is located, this must be loaded via ajax. this script should be loaded at the click of a button, the trick is that when you click on the button, a couple of seconds first pass before the “construction” of the entire document begins, and the customer, of course, did not like it.
Booking script:

<script type="text/javascript" src="//ext.ihbooking.ru/loader.php?key=a6bb630f550135cf655e7201d7ce87f7&objid=801&customcss=gupmc&default=true&nodescription=true"></script>

What you need:
Attach a jammer (or preloader, call it what you want) for a while while the document is being formed and until all divs and images are loaded, how to track this moment? Maybe there is some event that signals that everything is ready?

Sketched in haste, for the test:
$.ajax({
      type: "POST",
      url: 'server.php',
      dataType: "html",
      data: '',
      complete: function() {
        console.log('Контент подгрузился (complete)');
      },
      success: function(result) {
        console.log('Контент подгрузился (success)');
        $("#content").html(result);
      },
      error: function(err) {
        console.log(err);
      }
    }).always(function() {
      console.log('Контент подгрузился (always)');
    });

All events are triggered before the content is loaded, tell me, can anyone solve this?
Solutions with setTimeOut and the like are not suitable, it may be that the user has a slow Internet connection and the download will take longer than usual.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question