JQuery AJAX load () & ready () - PullRequest
Новая
       27

JQuery AJAX load () & ready ()

0 голосов
/ 18 марта 2012

Мой основной HTML-файл динамически загружается в содержимое с; 

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
  Loading please wait
  <script type="text/javascript">
    $(document).ready(function(){
      $('body').load("remotePage.html");
    });
  </script>
</body>
</html>

remotePage.html is; 

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="script1.js"></script>
  <script type="text/javascript" src="script2.js"></script>
  <script type="text/javascript" src="script3.js"></script>
</head>
<body>
<script type="text/javascript">

  function init(){
    someFunctionThatDependsOnAllScripts();   //Fails because all scripts is not yet loaded
  }

  $(document).ready(init);

<script>
</body>
</html>

Сбой, потому что готовый в script1.js вызывается перед script1.JS загружен.Кажется, что не помогает обратный вызов при загрузке. 

$(function(){
  $('body').load("remotePage.html", function(){
    init();  //doesn't work either
  });
});

Как я могу узнать, когда все операции ajax для загрузки ресурсов, требуемых для remotePage.html, завершены?Как исправить?

Спасибо

1 Ответ

0 голосов
/ 18 марта 2012

Измените тег сценария следующим образом: 

<script type="text/javascript" src="script1.js" onload="init()"></script>

И удалите метод $(init); из своего сценария.

ОБНОВЛЕНО: Если у вас было несколько сценариев для включения, тоВы можете использовать что-то вроде этого: 

<html>
<head>
  <script type="text/javascript" src="script1.js" onload="scriptLoaded()"></script>
  <script type="text/javascript" src="script2.js" onload="scriptLoaded()"></script>
  <script type="text/javascript" src="script3.js" onload="scriptLoaded()"></script>
</head>
<body>
<script type="text/javascript">
   //
   var totalScriptsToLoad = 3;
   function scriptLoaded(){
        if(--totalScriptsToLoad == 0){
             init();
        }
   }
   //
   function init(){
       someFunctionFromScript1();   //Fails because script1 is not yet loaded
   }

<script>
</body>
</html>
...