展示 mobify 工作原理的示例

Question

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

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

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

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

Answer 1

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

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

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

然后，在 JavaScript sn-p 中，您可以修改它以获取 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？