Вот тут, как я понимаю, и есть разрыв: неполный DOM при первом вызове!
И моя библиотека и браузерный DOM-обходичик будут в режиме race condition, используя HTML-текст (для заполнения DOM), как общий входной пул.
Может можно, чтобы не дёргать потом 2-й раз:
1. Как-то следить за "курсором" браузерного обработчика по HTML-разметке во время его прохода при формировании DOM?
2. Или попробовать обработать в своём скрипте (распарсить "вручную")
HTML-разметку при первом вызове (избегая DOM)? Но не будет ли это медленнее?
3. Или, после завершения обхода начального "дерева" (тех тегов, что уже обходчик браузера загрузил выше), проверить наступление события изменения DOM-структуры (если не дошли до события window.onload), и если DOM изменился - рекурсивно себя дёрнуть, чтобы не ждать window.onload ?
Т.е. как-то надо понять, как самому лучше превратиться в обходчика разметки напару с браузером не ожидая и не мешая друг другу)
(function() {
window.includeHTML = function(src, destination, callback) {
}
function includeHTMLAuto(node) {
}
var old_onload = window.onload;
window.onload = function() {
old_onload && old_onload();
includeHTMLAuto(document.body);
}
})();<html>
<title>boo</title>
<script src="foo.js">
<p>something</p>
</html>document.write('<h1>somethign</h1>');<html>
<title>boo</title>
<h1>somethign</h1>
<p>something</p>
</html><h1> вставит его в документ. И только после этого вставит параграф. <title>) скрипт может работать. <div data-src="menu.html"></div><html>
<div data-src="menu.html"></div>
<script src="includehtml.js">
<div id="load_later" data-src="load_later.html"></div>
</html>(function() {
window.includeHTML = function(src, destination, callback) {
}
function includeHTMLAuto(node) {
}
var old_onload = window.onload;
window.onload = function() {
old_onload && old_onload();
includeHTMLAuto(document.body);
}
includeHTMLAuto(document.body); // - добавили это
})();<html>
<div data-src="menu.html"></div>
<script async src="includehtml.js">
bla bla bla some code
<div id="load_later" data-src="load_later.html"></div>
bla bla bla some code 2
</html><div data-src="menu.html"></div>.сохранять всю статику в локал-сторадж - думал,
Она стартует и сейчас сама автоматически сразу, после инициализации функции
<html>
<script ASYNC src="includehtml.js">
<div id="menu" data-src="instant_menu.html"></div>
<link rel="stylesheet" href="1mb_style.css" type="text/css">
... blabla bla ... куча кода дальше.
<div id="defer_load" data-src="defer_load.html"></div>
<img ..><img ..><img ..>
</html>
https://usabili.ru/labs/mockup/ собственно зацикленная анимация
https://usabili.ru/labs/mockup/onscroll.html - js анимация привязанная к скролу окна.
> это как без js привязать таймлайн анимации к скроллу? Я чего то не знаю? ))
хз зачем вам это, какие-то новые подробности постоянно всплывают. Ну, раз надо привязать к скролу - пожалуйста. если бы в вопросе изначально описали что вы хотите достичь, вам бы помогли быстрее. Интересно как бы вы анимацию гифки прокручивали по скролу...
> мне мало интересны посетители со старыми нокиями
> на сафари анимация смещения бекграунда часто дерганая при быстром скролле
мне мало интересны посетители со старыми iphone 11 pro =) я с компа сижу, тут и аппаратное ускорение, и прочие фишки. Тем не менее, чтобы у вас в сафари анимация не лагала, надо понимать как она устроена и что тормозит. У реального пользователя (как я) на айфончике или, там, самсунге, будет открыть 40 вкладок в браузере, и 20 приложений - музыка, мессенджеры и прочее. Поэтому ресурсы чтобы обрабатывать вашу анимацию будут очень ограничены. Поэтому надо профилировать. Например в хроме в девтулз открыть вкладку performance - выбрать там cpu 6x slowdown и посмотреть. Если в анимации будет ~60fps - то всё хорошо.