Mobify.js — изменение DOM до начала загрузки рессурсов

Mobyfy.js — открытая библиотека предназначенная прежде всего для облегчения создания отзывчивых (responsible) сайтов. Основная фишка состоит в так называемом «Capturing API» — позволяющем модифицировать DOM непосредственно ДО начала загрузки ресурсов (скриптов, изображений и т.д.)

Вот пример работы с отзывчивыми изображениями:

<picture>     <source src="/examples/assets/images/small.jpg">     <source src="/examples/assets/images/medium.jpg" media="(min-width: 450px)">     <source src="/examples/assets/images/large.jpg" media="(min-width: 800px)">     <source src="/examples/assets/images/extralarge.jpg" media="(min-width: 1000px)">     <img src="/examples/assets/images/small.jpg"> </picture>

Файл «small.jpg» не будет загружен на клиенте с большим экраном, вместо него загрузится то, что будет соответствовать медиа-критерию.

Принцип работы довольно интересен: на странице в начало тега HEAD вставляется скрипт, временно оборачивающий содержимое BODY в тег PLAINTEXT — это предотавращает загрузку рессурсов. Далее выполняется наш код, манипуляции с DOM, ну а в конце BODY восстанавливается.

Поддержка браузерами:

• Webkit (Safari, Chrome, etc) — все версии
• Firefox 4.0+
• Opera 11.0+
• Internet Explorer 10+

Официальный сайт, интересное обсуждение на сайте мозилы.