當使用AngularJs時，如果在src attr上設置了img標簽上的data-src

Question

我面臨着一個愚蠢的問題。 我想在我的角度應用程序中使我的圖像延遲加載，我試過這個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}}" >

為什么？ 如果有src attr，如何在img標簽上設置data-src ？

Answer 1

這可能對你有幫助 -

你可以使用Jquery-

$("img").attr("data-src","appCtrl.img");

JsFiddle-

https://jsfiddle.net/codecore/2fqbbsst/

Answer 2

我不太確定角度是如何在這里播放的，所以我不能完全確定它是如何影響這個問題的; 無論如何， data屬性只是在加載時加載到dataset ，這意味着如果您具有data-src屬性，則將在此元素的dataset對象中創建src屬性。 也就是說，你可以使用這個：

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