angularjs - 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 启动
• Angular 在 DOM 元素中插入模板字符串
• 现在我们终于得到类似http://www.gravatar.com/avatar/realHash的东西了，这就是我们所需要的

<小时/>

现在让我们看一下正确的示例:

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

这是发生的事情:

• DOM 加载
• ng-srcset找到属性，但无法识别，因此不会进行服务器调用
• Angular 启动
• Angular 会考虑所有 ng-* 属性，在 DOM 元素中插入模板字符串
• 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/