[英]How to set data-src on img tag when it has src attr when using AngularJs
I am facing a stupid problem. 我面临着一个愚蠢的问题。 I am trying to make my images lazy load in my angular app, I have tried this 2 :
我想在我的角度应用程序中使我的图像延迟加载,我试过这个2:
<img src="/img/blank.gif" data-src="{{appCtrl.img}}" >
<img src="/img/blank.gif" ng-attr-data-src="{{appCtrl.img}}" >
But they both set the src
attr instead of data-src
, am i missing someting here ? 但他们都设置了
src
attr而不是data-src
,我在这里错过了吗? The only way to keep the data-src
attr is not to have any src
attr ??? 保持
data-src
attr的唯一方法是不要有任何src
attr ??? This works as expected : 这按预期工作:
<img ng-attr-data-src="{{appCtrl.img}}" >
<img data-src="{{appCtrl.img}}" >
Why? 为什么? How to set
data-src
on img tag when it has src
attr? 如果有
src
attr,如何在img标签上设置data-src
?
This might help you- 这可能对你有帮助 -
You can do it using Jquery- 你可以使用Jquery-
$("img").attr("data-src","appCtrl.img");
JsFiddle- JsFiddle-
https://jsfiddle.net/codecore/2fqbbsst/ https://jsfiddle.net/codecore/2fqbbsst/
I am not quite sure how angular plays in here, so i am not full sure how it plays into the problem; 我不太确定角度是如何在这里播放的,所以我不能完全确定它是如何影响这个问题的; anyways
data
attributes are just loaded into the dataset
on load, meaning if you have the data-src
attribute a src
property will be created in the dataset
object for this element. 无论如何,
data
属性只是在加载时加载到dataset
,这意味着如果您具有data-src
属性,则将在此元素的dataset
对象中创建src
属性。 That said, you can use this: 也就是说,你可以使用这个:
yourDOMElement.dataset.src = "{{appCtrl.img}}"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.