Maison  >  Questions et réponses  >  le corps du texte

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

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 ?

我想大声告诉你我想大声告诉你2727 Il y a quelques jours680

répondre à tous(4)je répondrai

  • 仅有的幸福

    仅有的幸福2017-05-24 11:34:17

    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-...

    répondre
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-24 11:34:17

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

    répondre
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-24 11:34:17

    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é.

    répondre
    0
  • 为情所困

    为情所困2017-05-24 11:34:17

    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

    répondre
    0
  • Annulerrépondre