1. Introduction du fond
Dans l'application d'album photo en ligne, les utilisateurs ont le besoin de voir les photos. Lorsque le réseau est plus lent, le temps d'attente pour consulter les photos est relativement long et l'expérience utilisateur sera très médiocre.
2. Situation actuelle
Il existe deux façons principales de charger des photos:
(1) La façon la plus originale de charger et d'afficher directement les photos sur la page HTML avec la balise IMG. Cette méthode aura un processus d'attente vierge lorsque la vitesse du réseau est lente ou que les photos à afficher sont relativement grandes et que l'expérience utilisateur sera médiocre.
(2) Utilisez d'abord la balise IMG pour charger la vignette de la photo pour afficher la photo sur la page HTML, puis utilisez JavaScript pour charger l'image d'origine de la photo cachée, et attendez que la grande image de la photo soit chargée avant d'afficher l'image d'origine sur la page. Ce qui suit est l'organigramme:
3. Notre solution
Certaines des méthodes d'optimisation récemment faites par QQ Photo Album ont résolu les lacunes des deux méthodes d'appel et ont rencontré les besoins des utilisateurs pour voir les photos: voir la situation générale des photos le plus tôt possible et voir l'image originale claire le plus rapidement possible. Cette méthode utilise des vignettes et des images originales pour charger et superposer l'affichage simultanément. Tout d'abord, chargez les vignettes et développez l'écran, et la grande image est superposée aux vignettes et charge simultanément. La vignette est très petite et permet généralement aux utilisateurs de voir rapidement l'image floue. Pendant le chargement de la grande image, la vignette est progressivement couverte de haut en bas, afin que l'utilisateur puisse voir la grande image pendant le processus de chargement.
(1) Exemple de diagramme
Comme indiqué ci-dessus, les étapes de traitement de cette méthode sont:
1). Obtenez l'URL de la miniature photo et de l'image d'origine et obtenez la longueur et la largeur de la photo;
2). Chargez et affichez les miniatures photo et étirez les vignettes en fonction de la longueur et de la largeur du film. À l'heure actuelle, l'utilisateur voit un effet flou;
3). Chargez et affichez la photo d'origine, superposer l'image d'origine sur la vignette pour l'afficher. L'image d'origine sera affichée autant qu'elle se charge. S'il n'est pas chargé, il affichera toujours la vignette. Écraser progressivement la vignette. Pendant le processus de chargement de l'image d'origine, l'utilisateur voit l'effet de gradient de la photo de flou à claire.
4). Une fois l'image d'origine chargée, l'image d'origine a toutes écrasé les vignettes et l'utilisateur voit la véritable image d'origine. À l'heure actuelle, vous pouvez masquer les vignettes pour empêcher les vignettes d'interférer avec l'affichage d'images avec des effets transparents tels que PNG ou GIF.
(2) exemple de code
<! - Réglez la taille de la photo -> <div> <! - La petite image s'affiche en grande taille -> <img src = "small_url" /> <! - L'image originale est superposée sur la petite image -> <img src = "big_url" /> </div>
Ce qui précède est l'intégralité du contenu de cet article. Pour plus d'informations sur JavaScript, vous pouvez consulter: "JavaScript Reference Tutorial" et "JavaScript Code Style Guide". J'espère également que tout le monde soutiendra davantage Wulin.com.