Prevenire il caricamento di un'immagine finché non si trova nella vista utilizzando ng-src

Question

Vorrei poter impedire a un'immagine che ha un attributo ng-src di caricarsi finché non è visibile nel viewport.

Ciò è possibile con Angolare?

In precedenza ho utilizzato lo jQuery LazyLoad Plugin, tuttavia sto cercando di farlo senza dover utilizzare sia Angular che jQuery.

Answer 1

Penso che si possa semplicemente associare la sorgente a un getter che restituisce il valore solo se l'elemento è visibile (supponendo che si stia utilizzando un'associazione di qualche tipo per attivare la visibilità dell'img).

Ad esempio, utilizzare ng-src="{{getImgSource()}}" e nel controllore:

scope.getImgSource = function(){ 
    if(scope.showImg){ 
     return "myImageUrl.png"; 
    } 
    return ""; 
}; 

Tuttavia, se questo è qualcosa che si dovrà usare un sacco, forse si dovrebbe guardare in creare il proprio direttiva per farlo.

Answer 2

Nel caso in cui siete ancora interessati, ho scoperto questo repo su github: https://github.com/afklm/ng-lazy-image

ho provato e rocce!

Le immagini vengono caricate solo quando vengono visualizzate nella vista E si può scegliere quale immagine caricare in base alle dimensioni dello schermo. Significa che puoi caricare immagini più piccole per gli utenti mobili;)