展示 mobify 工作原理的示例

Question

我已经查看 mobify.js 网站一段时间了，但我不明白使用它的好处。（我很困惑为什么要用 GrumpyCat 图片替换页面上的所有图片？）。

能否请您指出一个清晰明了的示例，其中，我可以看到根据浏览器分辨率，我的图像大小会发生变化。

到目前为止，我完成了以下任务： 0.包含mobify.js个头信息 1. 在我的托管网站中使用了 mountains.jpg 和 forest.jpg 图片（该页面仅包含这两个图片） 2. 从台式机、平板电脑（三星 Galaxy 10 英寸）、android 手机 phone 请求页面。 3. 在这三种情况下，我看到下载的是同一张图片，图片的大小在所有情况下都保持不变。

我知道缩小尺寸的魔法不可能即时发生，但我该如何实现？

Answer 1

我意识到不爽猫的例子有点厚颜无耻，但同样的概念也适用于解决你的问题。您可以编写一些逻辑将图像替换为低分辨率图像（即 mountains-320.jpg 和 forest-320.jpg），而不是用不爽猫图像替换图像。

对于 Mobify.js，您需要在添加到站点的 JavaScript 片段中编写改编。因此，要为移动设备加载较小的图像，您可以在原始 HTML 中定义较低分辨率图像的路径，如下所示：

<img src="mountain.jpg" data-mobile-src="mountain-320.jpg" />
<img src="forest.jpg" data-mobile-src="forest-320.jpg" />

然后，在 JavaScript 片段中，您可以修改它以获取 data-mobile-src 属性中的图像，而不是像这样：

        if (capturing) {
            // Grab reference to a newly created document
            Mobify.Capture.init(function(capture){
                // Grab reference to the captured document in progres
                var capturedDoc = capture.capturedDoc;

                var imgs = capturedDoc.getElementsByTagName("img[data-mobile-src]");
                for(var i = 0; i < imgs.length; i++) {
                    var img = imgs[i];
                    var ogImage = img.getAttribute("x-src");
                    var mobileImage = img.getAttribute("data-mobile-src");
                    img.setAttribute("x-src", mobileImage);
                    img.setAttribute("old-src", ogImage);
                }

                // Render source DOM to document
                capture.renderCapturedDoc();
            });
        }

然后，您会看到移动网站将下载并呈现 mountain-320.jpg 或 forest-320.jpg，但不会下载 mountain.jpg 或 forest.jpg。

出于好奇，您想在哪个网站上使用 Mobify.js？

展示 mobify 工作原理的示例

Example to show how mobify works

mobify

mobify-js