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

Question

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

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

问候马克

Answer 1

我没有时间为您编写指令，但您可以从ngSrc 指令源开始，仅在某些条件下设置属性...其中 90% 是注释和文档，只有一点代码在实际上是底部。我认为这是指令的基本链接功能，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]);
    });
  }