Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [HTML] Данные внутри документа / 8 сообщений из 8, страница 1 из 1
01.05.2013, 06:52
    #38245935
NekZ
NekZ
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
Доброго времени суток. Мне необходимо реализовать lazy load на странице определённого блока html (безо всяких там этих ваших ajax-запросов), который не попал бы в DOM при загрузке страницы, оставаясь при этом на самой странице в каком угодно виде. В блоке находится множество подключаемых скриптов с разных сайтов, которые тормозят первоначальную синхронную загрузку страницы.
Какие я рассматриваю варианты:
 
Вариант №1
Запихнуть в тег script с неизвестным типом и после загрузки страницы пытаться его вставить в нужный блок. Пример:
Код: html
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>


Код: javascript
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. Пример сделан "на коленке", но суть осталась.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.05.2013, 09:18
    #38245946
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
Весь бред, что тут понаписан, не имеет отношения к lazy load, данные будут в DOM в любом случае, не в том виде так в этом.

Почему нельзя просто скрыть блок? Зачем нужен этот дикий ахтунг с прятками в переменных и cdata? Если лишь из-за этого: В блоке находится множество подключаемых скриптов с разных сайтов, которые тормозят первоначальную синхронную загрузку страницы.то их-то и нужно подгружать, когда в них возникнет нужда.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.05.2013, 12:21
    #38246019
NekZ
NekZ
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
Antonariy,

Данные в DOM, окей. Не нужно чтобы они были его элементами, скажем так, коль до слов докопались.
>то их-то и нужно подгружать, когда в них возникнет нужда.
Как?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.05.2013, 13:27
    #38246046
Парамон
Парамон
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
NekZ В блоке находится множество подключаемых скриптов с разных сайтов, которые тормозят первоначальную синхронную


А если просто кинуть их в самый низ страницы? )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.05.2013, 08:41
    #38246429
NekZ
NekZ
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
Парамон,

Это всё равно синхронная загрузка
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.05.2013, 10:34
    #38246458
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
NekZ>то их-то и нужно подгружать, когда в них возникнет нужда.
Как?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!--<script type="text/javascript" src="1.js"></script>-->

<script>
	var urls = {"src1" : "http://127.0.0.1/1.js", "src2" : "http://127.0.0.1/2.js"}

	function xxx() {
		if (!window.sss) { // переменной нет, значит скрипт не подгружен, загружаем его
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = urls.src1;
			script.onload = function() {
				xxx_click();
			}
			document.getElementsByTagName('head')[0].appendChild(script);		
		} else {
			xxx_click();
		}
	}
	
	function xxx_click() {
		alert(window.sss); // fuck
	}
	
</script>

<input type="button" value="click me" onclick="xxx()">


Содержимое http://127.0.0.1/1.js: 

sss = "fuck";



Либо сразу после window.onload страницы по списку проходить и подгружать все скрипты через document.createElement('script');.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.05.2013, 11:28
    #38246497
Парамон
Парамон
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
как подгружать js
А когда, это уже вам решать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.05.2013, 23:10
    #38247459
NekZ
NekZ
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[HTML] Данные внутри документа
Мды... Все выше ответы относятся к моему третьему варианту. Окей. Жду ещё предложений.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [HTML] Данные внутри документа / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 563ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448380]:
 0ms
get settings:
 10ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 226ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 247ms
total:  563ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]