响应式图片101(二):图片加载

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

我们需要的响应式图片解决方案的主要原因之一是<img>元素功能不足。它只有一个src属性,只能加载一张图片资源,但是我们需要加载多个资源。

既然如此,你可能会很惊讶怎么我们还在讨论<img>元素而不是其他新东西例如<picture>srcset

不管采用哪种响应式图片方案,<img>元素必不可少

<img>元素在所有的内联响应式图片解决方案中都饱受诟病。我喜欢把img当做一个添加和应用所有响应式图片规则的盒子。

图片需求

你可以用JavaScript来监控img元素上currentSrc的变化。下面一段简单的脚本用来监控改变并输出到页面上:

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;

    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };

  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

你可以在示例页面观察实际反映。改变浏览器尺寸来观察currentsrc的变化。

将你的浏览器慢慢的缩小,你将看到如下图的一个变化效果:

图片需求

为什么会这样?

<img>总是显示当前资源,这意味着任何与<img>元素交互的JavaScript代码都会如期持续工作。

(还没提到几十年来浏览器开发人员写的非常有价值的正确处理图片代码)

正如Eric Portis所说,当我们使用新的响应式图片标准时,“我们正逐渐加强img”的特性。

还需要img以外的东西吗?

在一些场景下单独用img可能就够了:

  • 固定宽度,单一分辨率网页:如果你没有用响应式设计并且不用担心"retina"屏幕,img元素就够了。
  • 文件尺寸差别很小:对于有些图片,最大版本和最小版本的尺寸没有很大区别。常见的有logo,图标和其他不需要根据视窗变化的小图片。如果文件尺寸没什么区别,一张图片可能就够了。
  • 使用基于矢量的图片例如SVG:如果使用基于矢量的图片格式例如SVG,图片可以自由缩放并不需要多张图片。在这种情况下,可以直接用SVG做为img的图片源。

当然,这取决于需要适配的浏览器是否支持SVG。最好使用picture元素来提供可选的图片格式作为备用方案。会在这个系列里将会介绍这个元素的使用。

想要支持高分辨率屏幕怎么办?

如果想要支持高分屏,我们需要扩展<img>元素。请看这个系列的第3部分:Srcset显示分辨率

上一篇下一篇

本文根据@Jason Grigsby的《Responsive Images 101, Part 2: Img Required》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.cloudfour.com/responsive-images-101-part-2-img-required/

Blueed

现居上海。正在学习前端的道路上,欢迎交流。个人博客:Blueed.me,微博:@Ivan_z3

如需转载,烦请注明出处:http://www.w3cplus.com/responsive/responsive-images-101-part-2-img-required.htmlNike Tanjun SE BR Running Shoe Deep Blue 844908-401 P

如需转载,烦请注明出处:https://www.w3cplus.com/responsive/responsive-images-101-part-2-img-required.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部