javascript - 使用 AngularJs 时，当 img 标签具有 src attr 时，如何在其上设置 data-src

Question

我面临着一个愚蠢的问题。我试图在我的 Angular 应用程序中延迟加载我的图像，我已经尝试过这个2:

<img src="/img/blank.gif" data-src="{{appCtrl.img}}" >
<img src="/img/blank.gif" ng-attr-data-src="{{appCtrl.img}}" >

但是他们都设置了 src attr 而不是 data-src，我在这里遗漏了什么吗？保留 data-src attr 的唯一方法是不具有任何 src attr ？？？这按预期工作:

<img ng-attr-data-src="{{appCtrl.img}}" >
<img data-src="{{appCtrl.img}}" >

为什么？当img标签具有 src属性时，如何在img标签上设置 data-src？

Answer 1

我不太确定 Angular 在这里是如何发挥作用的，所以我不太确定它是如何解决问题的；无论如何，data 属性只是在加载时加载到 dataset 中，这意味着如果您有 data-src 属性，则 src > 属性将在该元素的dataset 对象中创建。也就是说，您可以使用这个:

yourDOMElement.dataset.src = "{{appCtrl.img}}"