ngSrc和ngSrcset之间的区别

Question

当我浏览Angular API参考文档时,我没有清楚'ngSrcset'.有人可以通过一个例子来澄清.

https://docs.angularjs.org/api/ng/directive/ngSrcset

Answer 1

理解它的最简单方法可能是分析每种情况下页面加载时会发生什么.

我们来看看"标准/错误"示例:

<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>` 

这是发生的事情:

• DOM加载
• srcset找到并识别属性
• http://www.gravatar.com/avatar/{{hash}}当然,请求是不存在的,所以我们得到404
• 角度起火
• Angular在DOM元素中插入模板字符串
• 现在我们终于得到了类似的东西http://www.gravatar.com/avatar/realHash,这就是我们所需要的

现在让我们来看看正确的例子:

<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>`

这是发生的事情:

• DOM加载
• ng-srcset 找到属性,但无法识别,因此不会进行任何服务器调用
• 角度起火
• Angular在DOM元素中插入模板字符串,同时考虑所有ng-*属性
• srcset属性是从内插值创建的,ng-srcset所以我们立即获得类似:<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x" srcset= "http://www.gravatar.com/avatar/realHash 2x" />,这正是我们想要的.
• srcset找到并识别新添加的属性,因此服务器会调用http://www.gravatar.com/avatar/realHash,一切都很好

同样的原则也适用于ng-src,ng-href等等.

这是一篇关于scrset本身的有趣文章:http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/