Доброго времени суток. Мне необходимо реализовать lazy load на странице определённого блока html (безо всяких там этих ваших ajax-запросов), который не попал бы в DOM при загрузке страницы, оставаясь при этом на самой странице в каком угодно виде. В блоке находится множество подключаемых скриптов с разных сайтов, которые тормозят первоначальную синхронную загрузку страницы.
Какие я рассматриваю варианты:
Вариант №1
Запихнуть в тег script с неизвестным типом и после загрузки страницы пытаться его вставить в нужный блок. Пример:
1.
2.
3.
4.
5.
6.
7.
8.
9.
<div class="lazy-load-block"></div>
<script type="text/template" id="lazy-load-block-template">
<div id="div1"></div>
<script type="text/javascript" src="//site1.com/js.js"></script>
<div id="div2"></div>
<script type="text/javascript" src="//site2.com/js.js"></script>
<div id="div3"></div>
<script type="text/javascript" src="//site3.com/js.js"></script>
</script>
1.
2.
3.
4.
5.
6.
7.
$(document).ready(function() {
setTimeout(function() {
var lazyBlockText = $('#lazy-load-block-template').text();
var $lazyLoadBlock = $('.lazy-load-block:first');
$lazyLoadBlock.html(lazyBlockText);
}, 4);
});
Вариант №2
Содержимое блока загнать в base64 и расположить в каком-либо элементе с display: none и потом так же js-ом достать, задекодить и закинуть в DOM.
Вариант №3
Весь текст блока поместить в JS переменную window.lazyLoadBlock и действовать как раньше
Вариант №4
Использовать CDATA
---------------------------------------
Вариант 1 не работает потому что внутри блока встречается </script> который его закрывает (даже тут подсвечивается соответствующе)
Вариант 2 оверхед при рендеринге в случае использования шаблонных тегов внутри этого блока
Вариант 3 работает, но по моему скромному мнению не очень красивое решение, опять же, рендеринг в JS с экранированием
Вариант 4 не могу разобраться как оно работает, может, CDATA вообще для этого не предназначена?
Прошу совета как лучше всего решить данную проблему.
Спасибо.
P. S. Пример сделан "на коленке", но суть осталась.
