LINUX.ORG.RU
Форум — Web-development  

Как заставить скрипты грузиться до картинок?

 


0

3

Сейчас модно делать так, чтобы скрипты не тормозили загрузку страницы. И в развесистых проектах их грузят через всякие require.js, yepnope и т.п.

Это все клево, современно, но есть проблема. Страница показывается действительно быстро, но если там много картинок, то это сильно откладывает загрузку скриптов и полноценную инициализацию. Даже при том, что код загрузчика стоит в начале.

В интернетах пишут, что браузер успевает забить очередь загрузки картинками, потому что получает их src немедленно (со страницы), а пока загрузчик скриптов прочухается - пул коннектов уже забит.

Хочется чтобы было так:

1. Грузится страница
2. Грузятся CSS (и вот тут уже можно показывать)
3. Грузятся скрипты (вот тут начинает все полноценно работать)
4. Грузятся картинки, видео и т.п. (это можно быть довольно долго).

Есть финт, делать у картинок пустые src, потому яваскриптом перетаскивать из data-*. Но это не будет работать без жабаскрипта, не будет нормально индексироваться, что меня категорически не устраивает.

Еще была идея в начале страницы яваскриптом задавать класс, который картинкам проставит display:none, но оказалось, что они все равно будут грузиться.

Пока додумался только до того, что под каждую страницу ручками клепать зависимости, и втыкать их в head с атрибутом async. Тогда картинки не смогут их «обогнать». Но, блин, гимор же:

- сначала пердячим паром делать то, на что заточен yepnope
- потом еще yepnope-у объяснять, что какие-то вещи грузить не надо (потому что их напрямую воткнули).
- писать свои обработчики, которые трекают загрузку воткнутых вручную скриптов

Может кто-то знает более простой способ?

★★★★★
← three.js и физика
Адаптивная верстка →
  1 2 →

Самый простой способ: херачить код javascript внутрь html в теге head->script. А потом вешать на событие onload обработчик ииии... Ну, и картинки, естественно, размещать в body, в конце :) дополнительно это всё сжимать компрессором gzip.

Либо можно поюзать base64 :-)

menangen ★★★★★
()
Ответ на: комментарий от Vit

Так зачем загрузчику втыкать какие-то scriptы? Он может грузить файлы через обычный XMLHttpRequest, т.е. как AJAX, только в данном случае будет качаться не HTML или JSON, а яваскрипт. HTTP-кеширование кстати при таком подходе обеспечить можно.

anonymous
()
Ответ на: комментарий от anonymous

Вы почему-то решили, что если запустите свой реквест, то файл начнет грузиться немедленно. Этого не будет при забитой очереди запросов. Давайте вы еще раз внимательно посмотрите мои сообщения, начиная с первого, и попытаетесь понять суть проблемы.

Vit ★★★★★
() автор топика
Ответ на: комментарий от anonymous

загрузчики почему-то так обычно не делают, а используют вставку script в head. Видать так эффективнее.

Надо будет на lor тоже доделать использование загрузчика — я довольно давно прикрутил script.js для разных скриптов вроде подсветки синтаксиса и всякой другой динамини, но им пока что грузится все кроме jQuery который воткнут в html

maxcom ★★★★★
()
Ответ на: комментарий от maxcom

yepnope еще в зависимости от браузера втыкает через img, чтобы гарантированно в кеш отложилось, а потом перевтыкивает как script.

В принципе он самый навороченный, только там не стоит пользоваться ничем кроме финального колбека, потому что промежуточные дурят.

Vit ★★★★★
() автор топика
Ответ на: комментарий от Vit

Для небольших файлов весом до 500КБ... смотри: http://yadi.sk/d/pAPtvUkw8OuAm можно ли сказать, что файл весом 20КБ будет всегда загружаться быстрее, чем файл в 100КБ - да не факт. К тому же обновление, оно конечно будет, но ведь не каждую загрузку страницы, даже не каждый день. Я думаю, что в совокупности, единый файл будет работать быстрее.

В целом, я же вообще сторонник fulljs страниц и мнения, что nojs явление временное и уходящее ^_^

special-k ★★★★
()
Ответ на: комментарий от special-k

а ну наверное. Размеры сравнивать вообще не совсем корректно, т.к. они показываются без gzip компрессии которая есть в протоколе

maxcom ★★★★★
()
Ответ на: комментарий от maxcom

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

special-k ★★★★
()
Ответ на: комментарий от special-k

Вот конкретно сейчас у меня библиотеки 80к, редактор (tinymce) 110к и клиентский код вместе с шаблонами и переводами - 30к. Это все в зазипованном виде. Код страницы 20/5 к, в зависимости от того, первая загрузка, или продолжили аяксом.

Так что хочу пока с «умной загрузкой» разрулиться. Это не только ценный мех, но еще и интересная техническая задача.

Vit ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
  1 2 →
← three.js и физика
Web-development
Адаптивная верстка →