Перехват HTML-импорта

Question

Я не могу найти что-либо в Интернете. Я использую Polymer 1.6, и я пытаюсь сделать Lazy Загрузка элементов. До сих пор я преуспел в Lazy Загрузка их, и скорость значительно увеличилась.

Я занимаюсь архитектурой оболочки приложения, в которой я связываю (посредством минимизации и вулканизации) все сценарии, необходимые для работы навигатора и ящика. Но, как только я это сделаю, есть много импорта HTML, которые являются частью оболочки приложения, которые будут вызваны, потому что они отличаются по имени.

Я могу удалить импорт HTML из своих элементов, но это было бы подвержено ошибкам. Примечание: Я знаю, что импорт HTML выполняется только один раз, но поскольку они являются частью пакета, браузер не знает, как предотвратить его загрузку.

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

Что-то вроде этого:

var appShellComponents : [ 
    'polymer' 
    'my-navbar', 
    'paper-button', 
    'app-drawer' 

    document.addEventListener('HTMLImportEvent', function(event){ 
     //Untested code below 
     var href = event.srcTarget.href; 
     var component = href.substr(href.lastIndexOf('/').replace('.html',''); 
     if(appShellComponents.indexOf(component) > -1){ 
     //Element has been loaded, reject the import. 
      return; 
      } 

    }); 

мне нужен способ, чтобы сделать это с другими браузерами, такими как Firefox. По-видимому, Polymer использует полиполк, который вместо этого использует AJAX.

Answer 1

Самый лучший способ для обработки файлов на стороне сервера, с помощью программы, как глотком или ворчанием, например.

Вы могли бы заменить атрибут rel='import' из <link> элементов с собственным пользовательским именем, например rel='lazy-import', а затем обработать их с помощью собственного модуля загрузчика в браузере.

---

Если вы хотите обрабатывать ссылки во время выполнения на стороне клиента, вы можете ждать onload события на link (или HTMLImportsLoaded на document), но я предполагаю, что эти события произвели слишком поздно для чего вы (на самом деле это зависит от того, как разрабатываются различные веб-компоненты).

---

Однако с polyfill (для Firefox и Internet Explorer), это может быть возможным, потому что вы можете исправить код, реализующий XMLHttpRequest вызовы. К сожалению, он не будет работать для Chrome и Opera, потому что <link> анализируется и обрабатывается изначально, а <script> в импортированных файлах выполняется сразу же после их загрузки.

---

Обходной может быть, чтобы переместить веб-компоненты в папке, так что они не будут найдены с начальной относительной href URL (или использовать <base> элемент с неправильной URL). Тогда вам нужно будет только добавить <link> при необходимости.