避免在移动设备上渲染图像的 AngularJS 指令答案

【问题标题】：AngularJS Directive which avoids rendering of images on mobile devices避免在移动设备上渲染图像的 AngularJS 指令
【发布时间】：2013-10-22 05:47:28
【问题描述】：

我正在使用带有网格布局的 Twitter Bootstrap 编写一个 AngularJS 应用程序。我喜欢写一个指令，它不仅允许我将display:none 设置为移动设备上的图像，还可以避免渲染它们（以节省带宽并提高移动设备上的速度）。所以我想到了一个指令，它检查一个元素是否设置了display:none。如果是这样，则应从 DOM 中删除该元素（以及以下所有元素）。可悲的是，此时图像已经渲染。

如何避免图像在移动设备上呈现？指令迟到了吗？到时候dom已经渲染了吗？

问候马克

【问题讨论】：

AngularJS 在解析指令之前等待 DOMContentLoaded。没有加载图像以使 DOMContentLoaded 被认为是完整的，但听起来您希望 AngularJS 在此事件之前删除 DOM 元素，我认为这是不可能的。请注意，如果您通过 CSS 使用 @media 查询，则会遇到桌面用户调整浏览器大小的问题。

标签： jquery css angularjs twitter-bootstrap

【解决方案1】：

我没有时间给你写指令，但你可以从ngSrc directive source开始，只在特定条件下设置属性... 90% 是 cmets 和 docs，只有一点实际上在底部的代码。我认为这是指令的基本链接功能，normalized 类似于ngSrc，相同的代码用于ngHref。

return {
  priority: 99, // it needs to run after the attributes are interpolated
  link: function(scope, element, attr) {
    attr.$observe(normalized, function(value) {
      if (!value)
         return;

      attr.$set(attrName, value);

      // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
      // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
      // to set the property as well to achieve the desired effect.
      // we use attr[attrName] value since $set can sanitize the url.
      if (msie) element.prop(attrName, attr[attrName]);
    });
  }

【讨论】：