0

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

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

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

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

4

1 回答 1

1

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

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

于 2015-04-23T23:07:31.640 回答