Question

我一直在看mobify.js网站一段时间，但我不明白使用它的好处。（我很难理解为什么用GrumpyCat图像替换页面上的所有图像？）。

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

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

我知道缩小尺寸的魔力不会在飞行中发生，但我该如何实现呢？

Answer 1

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

使用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如何工作的示例

1 个答案: