javascript - Quel est le principe du chargement d'images sur Zhihu?

Question

Au début, tout est flou, et lorsqu'il est dans la plage de vue de l'écran, il sera affiché en haute définition.

Est-ce qu'il charge des images prétraitées à faible pixel au début, puis affiche des images haute définition ?

Ou est-ce une autre méthode ?

Answer 1

Je crois comprendre que vous devez d'abord charger une petite image, puis utiliser un filtre CSS3 pour la rendre floue, puis la charger paresseusement. Une fois la grande image chargée, remplacez le src.

.

Pour plus de détails, veuillez vous référer à cet article http://www.jackpu.com/medium-...

Answer 2

filtre : flou(10px), chargement du filtre terminé : flou(0)

Answer 3

Zhihu utilise Canvas pour flouter les petites images comme Medium et supprime les grandes images après le chargement. L’avantage est qu’il peut contrôler l’algorithme flou, mais l’inconvénient est qu’il est relativement lourd.

J'ai utilisé la méthode de petite image floue par défaut du navigateur pour la transition, https://blog.crimx.com/2016/1..., l'avantage est qu'elle est plus légère et a une bonne compatibilité, mais la petite image doit être flouté au préalable pour avoir un meilleur effet. Vous pouvez utiliser le flou CSS quelle que soit la compatibilité.

Answer 4

Le principe est quasiment le même que celui évoqué ci-dessus. Ici, j'ai également créé un composant vue, que je peux utiliser moi-même
vue-img-loader