jQuery ajax加载问题

JQUERY:

$.ajax
({
   url: 'b.html',
    success: function(data, textStatus, XMLHttpRequest)
    {
      $('#content').html($('#content', data).html());
    }
});

HTML:

<html>
 <body>
   <div id="content">
     <script type='text/javascript' src="xx.js"></script>
     <link rel="stylesheet" href="xx.css" type="text/css"/>
    <div>
        <img src="xxxxxxxxxx.jopg">
    </div>
  </div>
  </body>
</html>

how to know,a.html

$('#content').html($('#content', data).html());

First off, you wouldn't do that, but I'll assume you just whipped that up for the purpose of asking your question.

Couple of options come to mind:

  • use the setInterval function to keep checking every X milliseconds e.g. setInterval(function(){ /* check for elements here */ }, 500);

  • use window.performance.getEntriesByType("resource") to determine if all the resources you want have been downloaded. Again, this would probably be inside a setInterval.

If you simply loaded the b.html to begin with, using $(document).ready(function() { /* everything has now loaded*/ })); would be the answer.