Taobao Image Processing Discussion
La page de Taobao est très grande, mais elle s'ouvre très rapidement. Le traitement d'image utilise le chargement de défilement, ce qui signifie où roule l'axe de défilement et où l'image est chargée. Mais si vous voulez vérifier son code source, cela prendra beaucoup d'efforts, car leur compression de code et leur fusion sont bien faits! Étant donné que l'image est chargée dans le défilement et que l'image n'est pas chargée pendant l'initialisation, puis lorsque vous actualisez la page en bas de la page, la page inférieure ne sera généralement pas chargée. L'approche de Taobao semble être (parce que je n'ai pas regardé leur code source, simplement basé sur les opérations), rafraîchissant pour ramener la page au sommet.
Imitez Taobao et faites défiler les images pour charger
Voici trois façons de penser:
1. Chargement de chargement paresseux JavaScript Chargement de zone visuelle
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tapie> Harooms Blog front-end-visuel chargement javascript </title> <style> img {width: 100%; margin-bottom: 30px; Min-Height: 400px; Background-Color: #ddd;} </ style> </ head> <body> <img haroomslazyload = "chrysanthemum.jpg" src = ""> <img haroomslazyload = "désert.jpg" src = "" "> <img haroomslazyload = "hydrangeas.jpg" src = ""> <img haroomslazyload = "koala.jpg" src = ""> <img haroomslazyload = "lighthouse.jpg" src = ""> <img haroomslazyload = "penguins.jpg" src = ""> <img haroomslazyload = "tulips.jpg" src = ""> <script> var imgnum = document.getElementsByTagName ('img'). Length; var imgobj = document.getElementsByTagName ("img"); var l = 0; window.onscroll = function () {var seeHeight = document.DocumentElement.ClientHeight; var scrolltop = document.DocumentElement.ScrollTop || document.body.scrolltop; for (var i = l; i <imgnum; i ++) {if (imgobj [i] .offsetTop <Seeheight + scrolltop) {console.log (imgobj [i] .getAttribute ("src")); console.log (imgobj [i] .src); if (imgobj [i] .getAttribute ("src") == "") {imgobj [i] .src = imgobj [i] .getAttribute ("haOromslazyload"); }} if (imgobj [i] .offsetTop> SeeHeight + scrolltop) {l = i; casser; }}}} </ script>Veuillez faire attention à mes deux sorties de console, Console.log (imgobj [i] .src); Pour obtenir toute l'adresse du navigateur!
2. JQUERY LOCAGE LOGEUR VISION CHARGEMENT
Le js ci-dessus est traduit avec jQuery!
var l = 0 // js la version de traduction de la méthode $ (window) .bind ("scroll", fonction (événement) {for (var i = l; i <$ ("img"). length; i ++) {if ($ ("img"). eq (i) .offset (). top <parseint ($ (window) .height ()) + parseint ($ (window if ($ ("img"). eq (i) .attr ("src") == "") {var lazyloadsrc = $ ('img'). eq (i) .attr ("haoroomslazy"); if ($ ("img"). eq (i) .offset (). top> parseInt ($ (fenêtre) .height ()) + parseInt ($ (fenêtre) .scrolltop ())) {l = i;3. Extension de chargement visuel de zone
Par exemple, un effet d'animation ou une image de toile, l'effet que je veux réaliser est qu'il ne se charge pas initialement. Lors du défilement de l'animation ou du graphique, il sera chargé. Ensuite, nous pouvons apporter les améliorations suivantes en fonction du code ci-dessus:
$ (fenêtre) .bind ("Scroll", fonction (événement) {// La hauteur de la fenêtre + la hauteur du haut invisible = la hauteur de la partie inférieure de l'écran de la var supérieure thisButtomtop = parseInt ($ (fenêtre) .height ()) + parseInt ($ (fenêtre) .scrolltop ()); var thistop = parseint ($ (window) .scrolltop ());); Le haut de l'écran à partir du top var picturetop = parseInt ($ (fenêtre) .offset (). TOP); Votre fonction de chargement ici, et la fonction de chargement sera déplacée du document d'origine.ready à ici!})Actualiser en haut
Lorsque nous faisons le chargement visuel de la zone, nous le laissons généralement actualiser vers le haut. Comme Taobao. Actualiser en haut.
Je ne sais pas comment Taobao fait. Refreindre en haut, j'ai utilisé l'événement OnBeforeunload.
Les événements OnBeforeUnload et OnUnload, Onunload et OnBeforeunload sont tous deux appelés lorsqu'ils sont rafraîchissants ou fermés. Ils peuvent être spécifiés dans le script <cript> via Window.onUnload ou dans le <body>. La différence est que OnBeforeUnload est exécuté avant OnNunload, il peut également empêcher l'exécution de OnUnload.
OnBeforeUnload est également appelé lorsque la page est actualisée ou fermée. OnBeforeUnload est appelé lorsqu'il est sur le point d'aller sur le serveur pour lire une nouvelle page, mais il n'a pas encore commencé à le lire. OnUnload a lu la nouvelle page qui doit être chargée à partir du serveur et est appelée lorsque la page actuelle est sur le point d'être remplacée. Ononload ne peut pas empêcher les mises à jour et les fermetures de page. Et onBeforeunload peut le faire.
1. Seul le chargement est exécuté lorsque la page est chargée
2. Lorsque la page est fermée, exécutez d'abord OnBeforeunload, et enfin sur le toot
3. Lors de la rafraîchissement de la page, exécutez d'abord onBeforeunLoad, puis onUnload et enfin onload.
Le retour rafraîchissant vers le haut est d'utiliser cet événement, vous pouvez l'écrire comme ça.
window.onbeforeUnload = function () {$ (window) .scrolltop (0);}Lorsque toutes les photos du site Web sont utilisées mais que la zone est chargée et que le CSS et le JS sont fusionnés et compressés, la vitesse et les performances de notre site Web seront bien améliorées!
Si vous voulez le faire comme Taobao, vous pouvez améliorer le code.
En fait, l'idée d'un chargement retardé est de mettre l'image dans un SRC de données ou une propriété en premier. Lorsque la page glisse dans la zone visuelle, affectez l'adresse d'image stockée à SRC.
Je ne listerai pas le code ici.