search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.56k stars 1.73k forks source link

Lazyload fails using AngularJS if src attribute is used #290

Open Sabbacus opened 8 years ago

Sabbacus commented 8 years ago

When using AngularJS to render the HTML and using the src attribute on the image tag the image loading fails, both the initial load and the lazy load.

It seems that the {{url}} in the src is copied to the data-src before it is replaced by Angular and thereafter being coped back, ending up broken.

Omitting the src attribute and everything seems to work fine.

Here is a Plunker example. In its current state it displays the version with the broken behaviour. Just swap the commented HTML code to see that it works without the src.

https://plnkr.co/edit/Nx7U7d4hyERZhSNNt0qV?p=preview

aFarkas commented 8 years ago

I haven't looked into this too deep. But lazysizes only copies the attribute from data-src to src, never the other way around.

The main problem however is that lazysizes starts to react as soon as a lazyload element is seen in the document. While angular might still need some time.

To fix this you can set the lazyload class via angular:

<img ng-class="lazyload" data-src="{{url}}" src="http://i.imgur.com/dFQzVbQ.png" />

This way lazysizes waits until angular has changed the url placeholder.

Here is a working demo: https://plnkr.co/edit/FmAcDbLQz4ALqwn8A5Va?p=preview

yairEO commented 7 years ago

I confirm! continuing my (investigation)[https://github.com/aFarkas/lazysizes/issues/311#issuecomment-269247743] I have read all the open issues until I found this one. tried to remove the src which was pointing to a blank image, and now the script works! a miracle! (I do not use Angular or any framework)