html5需要个picture标签?

responsive design 并不是 responsive image,它能创建适应性的布局可以缩放图片但不能智能加载适应屏幕大小的图片。在小尺寸屏幕上缩放大图片确定是浪费流量浪费时间的事。

解决方法一是后端检测浏览器信息输出不同的img地址,responsive design目的就是为了将前端行为与后端分开,这样做耗力耗时间而且浪费服务器资源。
二是前端用javascript检测屏幕大小(包括resize行为),自动加载适应屏幕大小的图片,但是用这样的方法,img标签的src属性是动态生成的,如果不幸javascript被禁用,那图片就显示不出来了。当然可以放张小图,但是总觉得麻烦。

我们只能寄望于html增加新的标签并且浏览器原生支持实现responsive image的功能。

Scott Jehl 提出的解决方式是用 标签和Media Query 让浏览器自动选择合适的图片。当然现在只能用javascript来实现了。不过这是一种十分可行而且语义十足的方式,希望在某一天可以被w3c列入html规范。

代码如下:

   
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- smallest size first - no @media qualifier -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
<!-- medium size - send to viewport widths 400px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5.jpg" media="(min-width: 400px)">
<!-- large size - send to viewport widths 800px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_z.jpg" media="(min-width: 800px)">
<!-- extra large size - send to viewport widths 1000px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_b.jpg" media="(min-width: 1000px)">
<!-- extra large size - send to viewport widths 1300px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_c6160b34e2_o.jpg" media="(min-width: 1200px)">
<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial,     unqualified source element. -->
<noscript>
<img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face     at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</picture>

原文在此:http://www.w3.org/community/respimg/2012/02/21/a-sample-picture-implementation/
demo在此:http://scottjehl.com/picturefill/
github:https://github.com/scottjehl/picturefill

##问题
因为浏览器不支持,即使google也还不知道有这样的标签。在这样的代码中是没有img标签的,爬虫并不能像原来一样找到img标签并列入索引。那么是否会对SEO造成很大的影响(尤其是图片网站)。即使某一天支持了,google认识了新的标签,但是百度什么的不认怎么办(连robots.txt都不大认识)。

HTML5 Page Visibility API

说明

HTML5的页面可见性API(暂时这么叫吧)可以用来检测页面对于用户的可见性,如果用户打开另一个tab上或者在其他窗口上,那么我们可以通过该API来检测变化并作出相应的操作。这个和android的生命周期有点相似。虽然IE只有在IE10才支持,不过给了个十分清晰的例子。链接见最后。

然后我们想到在这个API出来前我们是怎么检测页面可见性的?
在window上绑定onblur/onfocus可以检测页面是否处于激活状态(active),但不能检测到可见状态。
当然通过检测窗口最小化可以知道页面肯定是不可见了,但是似乎没有兼容所有浏览器的方法。
参考:https://github.com/evilmartians/visibility.js

它可以做什么

  • 减少内存使用
    停止或者暂停不可见页面的耗资源操作。

  • 节省服务器资源
    举例,当一个进行ajax轮询的页面不可见时,通过关闭轮询或者加大间隔时间可以节省一定的服务器资源。

  • 视频暂停和自动开始
    视频或者动画、游戏(不只是flash,包括html5动画)播放时如果需要切换到其他页面,用户不再需要点暂停,而且切换到该页面时自动从中断点播放。
    demo:http://www.samdutton.com/pageVisibility/

属性

document.hidden(document.webkitHidden)

如果页面不可见,返回true,否则返回false.不支持返回undefined。

document.visibilityState(document.webkitVisibilityState)

  • “visible” 当前页面至少部分可见
  • “hidden” 页面不可见(可能是后台tab或者最小化了)
  • “prerender” 预渲染中并且不可见,该状态可以是开始状态并且向其他两个状态变化但不可能从其他状态转变到该状态

使用

监听事件visibilitychange(webkitvisibilitychange)

//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
  if (document.webkitHidden) {
    pauseSimulation();
  } else {
    startSimulation();
  }
}
document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);
/*
 * If this is a browser that doesn’t support this API, we should
 * start the simulation as soon as this part of the script executes.
 * If it does support the API, then we should start if we’re already
 * visible at this point.  Otherwise, we’ll wait until we’re told
 * that we should start.
 *
 * Browsers that don't support this API will return undefined (a false-y
 * value) for document.webkitHidden, effectively defaulting to visible.
 */
  if (!document.webkitHidden) startSimulation(); 

参考

  • http://www.aoao.org.cn/blog/2012/01/pause-page/
  • http://www.igvita.com/2011/06/25/html5-visibility-api-page-pre-rendering/
  • W3:http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html
  • Google:http://code.google.com/intl/zh-CN/chrome/whitepapers/pagevisibility.html
  • Firefox:https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API
  • IE:http://ie.microsoft.com/testdrive/Performance/PageVisibility/Default.html

【未完】