GAE + Blobstore：根据视口宽度提供不同的图像尺寸

hyang123 发表于 Dev

hyang123

因为我们知道，我们可以使用它的服务从Blob存储图像服务的URL，并追加=sXX指示图像的宽度：

<!-- serving an image of 600px width -->
<img src="{{serving_url}}=s600" alt=""/>

效果很好，只是出于明显的webperf原因，我们希望为较小的屏幕提供较小的图像。我们如何根据屏幕尺寸提供不同的图像宽度？

感谢您的提示。

哈努曼

您可以使用javascript轻松实现这一目标，基本技术是src在评估您感兴趣的媒体查询后更改属性。

对于初学者来说，我会避免在src评估之前填满图片，因此默认情况下不会加载完整图片。像这样的东西：

<img data-src="{{serving_url}}" height="240" width="320">

在这里，我们在数据属性中呈现了url，因此稍后可以在脚本中访问它。我还添加了默认大小，因此保留了空间，但这当然是可选的。

现在，我们可以使用Window.matchMedia（）来评估我们的查询字符串：

var mql = window.matchMedia('(max-device-width: 667px)')
if (mql.matches) {
    // we're probably running on an iPhone6!
    img.src = img.dataset.src + '=s667'
}

使用完美尺寸获取图像！

我包括一个有效的代码段，可以轻松地将其扩展为许多查询测试，供您尝试。

var img = document.querySelector('img')
  , mql = window.matchMedia('(max-device-width: 667px)')
  , size = 1200
if (mql.matches) {
    size = 667
}
img.src = img.dataset.src + '=s' + size

img {
    object-fit: contain;
}

<img
    data-src="http://lh4.ggpht.com/TgjDT-cPRr6bjrpSVQeILk93o4Ouzjo1ygMB6KpmnCHhyH5vJKKRrqxCD2bC3T09CRIP6h5QFsV_l0hnhio5bN7z"
    height="240"
    width="320"
    >

这个问题友善地“提供”了测试图像。我也在使用对象适配，因为这对我来说很有意义。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。