Блог

У меня есть динамический веб-сайт, где все ссылки захватывают новые разделы с помощью ajax-запроса с других страниц и заменяют текущий раздел.

Моя проблема проявляется в двух формах. Когда я загружаю новый div из запроса Ajax get. Некоторым разделам также нужны файлы js. Например, используется particles.js в качестве фона холста. После завершения запроса ajax я затем получаю script «js file», и он работает. Однако, если вы перейдете к другим разделам, которые getScript все еще выполняются и теперь не привязаны, потому что этот раздел исчез. Если я снова вернусь к этому разделу, мне снова понадобится getScript, и теперь я запускаю его дважды. Это может быть очень интенсивным для процессора и графического процессора и замедляет работу моего сайта.

Такие вещи, как файлы css, просты, потому что я могу создать оператор if для загрузки, если он еще не загружен, теги скрипта отличаются, потому что Dom загружается только один раз. Добавление / удаление скрипта в head бесполезно, поскольку сайт полностью подключен к Ajax.

вот пример скрипта

 //pricing.html
  $(".link-pricing").click(function (e) {
    e.preventDefault();
    $("#togglenav").collapse("hide");
    $("#main").load("../../damonmedek/home/pricing.html #main-pricing");
    $(document).ajaxComplete(function (event, xhr, settings) {
      if (settings.url === "../../damonmedek/home/pricing.html") {

        //Add CSS
        if (!$("link[href='../assets/css/home css/pricing css/particles-js.css']").length)
          $('<link href="../assets/css/home css/pricing css/particles-js.css" rel="stylesheet">').appendTo("head");
 

        //Remove CSS
        $('link[rel=stylesheet][href*="../assets/css/home css/best-carousel-slide.css"]').remove();
 


        //Add JS
        $.getScript("../assets/js/home/pricing js/modal popup.js", function () {});
        **$.getScript("../assets/js/home/pricing js/particles.js", function () {});**
        $.getScript("../assets/js/home/pricing js/pricing-animated heading.js", function () {});
        $.getScript("../assets/js/members js/ajax members-only.js", function () {});
        $.getScript("../assets/js/home/pricing js/app.js", function () {});
        $.getScript("../assets/js/members js/ajax members-only.js", function () {});
      }
    });
  });
 

Как я могу повторно привязать страницу к js-файлу, или остановить getScript, или каким-либо более разумным способом решить эту проблему?
Это не просто проблемы с процессором, повторяющиеся getScripts могут вызывать такие проблемы, как повторная отправка при отправке и тому подобные странные вещи.

Так что этот ответ не так прост, как я думал. Это связано с распространением событий, которые я рекомендую вам тоже посмотреть. Чтобы захватить скрипт только один раз, он не может быть через jquery, но что-то вроде этого.

 
function loadJSFile() {
  if ($('script[src="'   jsFile   '"]').length > 0) {
    //script exists
  } else {
    function loadScript(url, callback) {
      // adding the script tag to the head as suggested before
      var body = document.getElementsByTagName("body")[0];
      var script = document.createElement("script");
      script.classList.add("example");
      script.type = "text/javascript";
      script.src = url;

      // then bind the event to the callback function
      // there are several events for cross browser compatibility
      script.onreadystatechange = callback;
      script.onload = callback;

      // fire the loading
      body.appendChild(script);
    }
    var myPrettyCode = function () {
      // here, do what ever you want
    };
    loadScript(jsFile, myPrettyCode);
  }}```

Then you need to use a bubbling method to click on things. like a div that is flown in and out and flown in and out. the js file is only loaded once but you are clicking through the main div that is loaded on first page load. And into the div you flying in, that contains the ids and classes you have inside that div. kinda confusing I know. 

```$("#home-div").on('click', '#ajaxedInDiv', function (e) {
$("#ajaxedInDiv").attr("something");
}