Главная

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

2013-09-16 в 14:33, admin, рубрики: javascript, Веб-разработка

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 восстанавливается и ресурсы грузятся.

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