Mobyfy.jsは、主にレスポンシブWebサイトの作成を容易にするために設計されたオープンライブラリです。 主な機能は、いわゆる「キャプチャ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」は、大画面のクライアントにはロードされず、代わりにメディアの基準を満たすものがロードされます（「ネットワーク」タブのWebインスペクターで確認できます）。
ページ上のすべての画像を置き換えるサンプルコード：
コードを展開
<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タグの先頭のページに、PLAINTEXTタグのBODYコンテンツを一時的にラップするスクリプトが挿入されます。これにより、リソースのロードが防止されます。 次に、コードが実行され、DOMで操作されますが、最後にBODYが復元され、リソースがロードされます。
ブラウザサポート：
- Webkit （Safari、Chromeなど）-すべてのバージョン
- Firefox 4.0以降
- Opera 11.0+
- Internet Explorer 10以降
公式サイト 、 Mozillaサイトに関する興味深い議論-コメントには技術の説明があります。