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

понедельник, 16 сентября 2013 г.

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

сегодня в 18:33

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» не будет загружен на клиенте с большим экраном, вместо него загрузится то, что будет соответствовать медиа-критерию (можете проверить в веб-инспекторе на закладке «сеть»).

Пример кода, подменяющий все изображения на странице:

Развернуть код


<script id="main-executable" class="mobify">
var main = function () {
    var capturing = window.Mobify && window.Mobify.capturing || false;
    if (capturing) {
        // Grab reference to a newly created document
        Mobify.Capture.init(function(capture){

            var capturedDoc = capture.capturedDoc;

            var grumpyUrl = "/mobifyjs/examples/assets/images/grumpycat.jpg"

            var imgs = capturedDoc.getElementsByTagName("img");
            for(var i = 0; i < imgs.length; i++) {
                var img = imgs[i];
                var ogImage = img.getAttribute("x-src");
                img.setAttribute("x-src", grumpyUrl);
                img.setAttribute("old-src", ogImage);
            }
            
            // Render source DOM to document
            capture.renderCapturedDoc();
        });
    }
}; main();
</script>

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

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

Webkit (Safari, Chrome, etc) — все версии

Firefox 4.0+

Opera 11.0+

Internet Explorer 10+

Официальный сайт, интересное обсуждение на сайте мозилы — в комментариях есть разъяснение технологии.

Developers, stick with Russians – work in London

Переводы с

карты на карту

Переводы

через QR-Код

Новая функция

«Мой контроль»

Возьми Lumia 925 на тест-драйв сейчас.

Впечатляющие возможности

в стильном тонком корпусе из металла

Boomburum

исследует LTE

Эволюция средств связи

в путешествии по России

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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: