Taobao Bildverarbeitungsdiskussion
Taobaos Seite ist sehr groß, aber es öffnet sich sehr schnell. Die Bildverarbeitung verwendet Scroll -Laden, sodass die Bildlaufachse rollt und wo das Bild geladen wird. Wenn Sie jedoch seinen Quellcode überprüfen möchten, wird es viel Mühe erfordern, da ihre Codekomprimierung und Verschmelzung gut gemacht werden! Da das Bild beim Scrollen geladen ist und das Bild während der Initialisierung nicht geladen wird, wird die Seite unter der Seite normalerweise nicht geladen. Taobaos Ansatz scheint zu sein (weil ich ihren Quellcode nicht nur auf der Grundlage von Operationen angesehen habe), um die Seite wieder nach oben zu bringen.
Ahme Taobao nach und scrollen Bilder zum Laden
Hier sind drei Möglichkeiten zum Nachdenken:
1..
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Harooms Front-End-Blog-Visual-Bereich zum Laden von JavaScript </title> <style> img {width: 100%; Margin-Bottom: 30px; min-hohe: 400px; Hintergrundfarbe: #ddd;} </style> </head> <body> <img HaroomsLazyload = "chrysanthemum.jpg" src = ""> <img HaroomSlazyload = "Desert.jpg" Src = "> <img HaroomsLazy =" Desert.jpg "Src =" " haroomsLazyload = "horteneas.jpg" src = ""> <img haroomsLazyload = "koala.jpg" src = ""> <img haroomsLazyload = "lighthouse.jpg" Src = "" haroomsLazyload = "tulips.jpg" src = ""> <script> var imgnum = document.getElementsByTagName ('img'). Länge; var imgobj = document.getElementsByTagName ("img"); var l = 0; window.onscroll = function () {var seHeight = document.documentElement.clientHeight; var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; für (var i = l; i <imgnum; i ++) {if (imgobj [i] .Offsettop <seEththth+scrolltop) {console.log (imgobj [i] .getAttribute ("src"); console.log (imgobj [i] .src); if (imgobj [i] .GetAttribute ("src") == "") {imgobj [i] .src = imgobj [i] .GetAttribute ("haoroomSlazyload"); }} if (imgobj [i] .offsettop> seHeight + scrolltop) {l = i; brechen; }}}} </script>Bitte achten Sie auf meine beiden Konsolenausgänge Console.log (IMGOBJ [i] .src); Um die gesamte Browseradresse zu erhalten!
2. JQuery Lazy Loading Visual Area Loading
Das obige JS wird mit JQuery übersetzt!
var l = 0 // js Methode Übersetzungsversion $ (Fenster) .bind ("Scroll", Funktion (Ereignis) {für (var i = l; i <$ ("img"). Länge; i ++) {if ($ ("img"). EQ (i) .Offset (). if ($ ("img"). EQ (i) .Attr ("src") == "") {var lazyloadsrc = $ ('img'). Eq (i) .attr ("haoroomsLazyLoad"); if ($ ("img"). EQ (i) .Offset (). Top> ParseInt ($ (Fenster) .Height ()) + ParseInt ($ (Fenster) .Scrolltop ()) {l = i;3. Verlängerung der visuellen Bereichsladung
Beispielsweise ist ein Animationseffekt oder ein Canvas -Bild, der Effekt, den ich erreichen möchte, ist, dass er anfangs nicht geladen wird. Beim Scrollen auf die Animation oder das Diagramm wird sie geladen. Dann können wir die folgenden Verbesserungen basierend auf dem obigen Code vornehmen:
$ (Fenster) .bind ("Scroll", Funktion (Ereignis) {// Die Höhe des Fensters + die Höhe des unsichtbaren Tops = Die Höhe des unteren Teils des Bildschirms vom oberen var thisbuttomtop = papseInt ($ ($ (fenster) .HEITHELT () + PARSINT ($ (Fenster) .Scrolltop (). Die Oberseite des Bildschirms aus dem oberen Var -Picturetop = ParseInt ($ (Fenster) .Offset (). Top); Ihre Ladefunktion hier und die Ladefunktion wird vom Originaldokument bewegt.Aktualisieren Sie nach oben nach oben
Wenn wir den visuellen Bereich laden, lassen wir ihn normalerweise nach oben erfrischen. Wie Taobao. Aktualisieren Sie nach oben.
Ich weiß nicht, wie Taobao es macht. Aktualisieren Sie es nach oben, ich habe das OnbeFeforeUnload -Ereignis verwendet.
OnbeforeUnload- und Onumload -Ereignisse werden Onunload und OnbeforeUnload beim Auffrischen oder Schließen aufgerufen. Sie können im Skript <skript> über window.onunload oder im <body> angegeben werden. Der Unterschied besteht darin, dass bei OnbeforeUnload vor Onun -Load ausgeführt wird und die Ausführung von Onun -load auch verhindern kann.
Bei der Vorladung wird auch aufgerufen, wenn die Seite aktualisiert oder geschlossen wird. Bei der Vorab -Beladung wird aufgerufen, wenn er zum Server gehen soll, um eine neue Seite zu lesen, aber es hat noch nicht begonnen, sie zu lesen. Onunload hat die neue Seite gelesen, die vom Server geladen werden muss, und wird aufgerufen, wenn die aktuelle Seite ersetzt werden soll. Onunload kann keine Seitenaktualisierungen und Schließungen verhindern. Und bei der Vorladung kann es tun.
1. Nur Onload wird ausgeführt, wenn die Seite geladen wird
2. Wenn die Seite geschlossen ist, führen Sie zuerst aufbeforeUnload aus und schließlich Onun -Load
3. Wenn Sie die Seite aktualisieren, führen Sie zuerst aufbeforeUnload aus, dann onunload und schließlich onload.
Das Erfrischen nach oben ist die Verwendung dieses Ereignisses, Sie können es so schreiben.
window.onbeforeUload = function () {$ (Fenster) .Scrolltop (0);}Wenn alle Bilder auf der Website verwendet werden, der Bereich jedoch geladen ist und das CSS und JS zusammengedrückt und komprimiert werden, wird unsere Website -Geschwindigkeit und -leistung stark verbessert!
Wenn Sie es wie Taobao tun möchten, können Sie den Code verbessern.
Tatsächlich besteht die Idee der verzögerten Belastung darin, das Bild zuerst in einen Daten-SRC oder eine Eigenschaft zu stecken. Wenn die Seite in den visuellen Bereich gleitet, weisen Sie SRC die gespeicherte Bildadresse zu.
Ich werde den Code hier nicht auflisten.