Ng-lazyload-image: Lazyload et srcset

Salut,

Cette bibliothèque ne supporte malheureusement pas srcset, mais elle devrait le supporter. C'est une caractéristique assez importante.

Cela étant dit, il n'est pas très facile à prendre en charge car nous devons analyser et comprendre le srcset de la même manière que le navigateur le fait.

Option 1:

Nous traitons srcset comme un cas particulier et n'essayons pas de charger l'image en arrière-plan, mais à la place, nous définissons simplement le srcset lorsque l'image est la fenêtre :
Disons que nous avons la balise html suivante :
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Lorsque l'image est dans la fenêtre, nous examinons srcset et détectons que lazyLoad contient une chaîne srcset et transformons simplement la balise en :
<img srcset="small.jpg 300w, large.jpg 500w">

Pro:
Mise en œuvre simple
Inconvénient :
L'utilisateur ne verra jamais "defaultImage".
Nous ne pouvons jamais gérer les erreurs de réseau lors du chargement de l'image.

Option 2:

Nous analysons les srcset et choisissons la meilleure option (comme nous pensons que le navigateur aurait dû le faire).
Disons que nous avons la balise html suivante :
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Nous détectons que lazyLoad contient un srcset et nous analysons la chaîne en quelque chose comme :
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
Nous la comparons à la largeur du navigateur (et au ratio de pixels de l'appareil ) et choisissons la meilleure image. Charge l'image en arrière-plan et lorsqu'elle est chargée, nous définissons simplement srcset et comme l'image est dans le cache, elle sera chargée immédiatement.

Pro:
L'image sera paresseuse
L'utilisateur verra l'image par défaut.
Nous pouvons gérer les erreurs de réseau (devrions-nous essayer de charger une autre image à partir du srcset ou devrions-nous simplement charger l' image d'erreur ?).
Inconvénient :
Il est toujours délicat d'analyser une chaîne de la même manière que le navigateur aurait dû le faire ; nous allons probablement manquer certains cas d'utilisation de bord.
D'après ma compréhension, le navigateur utilisera toujours la plus grande image si elle est stockée dans le cache. Comme nous n'avons aucun moyen de savoir si l'image a déjà été chargée, nous devons charger l'image la mieux ajustée (mais la plus grande image sera affichée après avoir défini srcset ). par exemple, disons que nous avons le srcset suivant small.jpg 300w, large.jpg 500w et que l'écran fait moins de 500 px mais que large.jpg est déjà chargé. D'après ce que j'ai compris, le navigateur aurait dû piqueter large.jpg puisqu'il est dans le cache mais comme nous ne savons pas que nous allons charger small.jpg et quand il sera chargé, nous définirons srcset et le navigateur choisira large.jpg (je peux cependant me tromper). c'est-à-dire que nous avons inutilement chargé une image.

Conclusion:

Je pense que l'option 2 est faisable (ne devrait pas être trop difficile) et je pense que nous devrions le faire. Mon temps est cependant assez limité en ce moment mais j'accepte volontiers un PR :)

Bonjour @tjoskar , merci pour la réponse rapide, je suis d'accord avec vous que la deuxième option pourrait être faisable. Je n'ai pas non plus trop de temps en ce moment car je suis sous certaines échéances mais dès que j'ai plus de temps, j'aimerais contribuer à cette fonctionnalité, d'autant plus que j'ai déjà étendu le comportement de la bibliothèque pour prendre en charge les paresseux chargement pour la balise d'image avec la propriété hlink.href :)

Ou ignorez l'option srcset du navigateur par défaut et implémentez-la comme votre propre processus de prise de décision et ajustez-la avec le temps pour qu'elle soit la meilleure possible :)

Spécification

Vous n'avez qu'à adhérer à la spécification et je pense que la spécification est assez simple.

Mais comme vous l'avez souligné, la mise en œuvre du navigateur peut casser ce que vous voulez réaliser ici, donc je pense qu'il devrait être contourné.

J'ai soumis une pull request (#231) qui ajoute la prise en charge de l'image réactive aux deux \ J'attends n'importe quelle entrée.

Ceci est inclus dans 3.4.0 . Merci @sapierens