JavaScript implementiert das Laden von Seitenscrollbildern

Warum diesen Artikel schreiben?

1. Es ist eine sehr praktische Methode zur Optimierung der Seite, und die technische Implementierung ist nicht schwierig.

2. Nach der Suche nach Artikeln mit verwandtem Inhalt scheint es, dass sie alle jQuery verwenden Methode, aber wenn der Webmaster nicht jQuery verwendet, können wir diese Methode nicht verwenden? Ich habe es gerade selbst herausgefunden. Wenn Sie Fragen haben, weisen Sie sie bitte darauf hin.

4. Ich habe den Blog dieses Monats noch nicht geschrieben.

Ich habe keine Arbeitsaufträge, daher werde ich bis jetzt nicht mehr schreiben.

Die meisten der aktuellen Seiten haben die gleichen Eigenschaften – reichhaltiger Inhalt und mehr Bilder wie Taobao , Jingdong, Gruppenkauf-Websites, die wir oft durchsuchen (ich bin eine Online-Einkaufskontrolle, gehöre zu Es macht keinen Spaß, wenn man einen Monat lang kein Geld online ausgibt. Dutzende Bilder auf einer Seite werden als Nieselregen bezeichnet, also jetzt a). Eine beliebte Methode ist das rollende dynamische Laden. Diese Methode kann einen großen Teil der HTTP-Anfragen lösen. Die Seite lädt nur die Bilder im Anzeigebereich und scrollt dann zur entsprechenden Position Lädt schneller (weniger Anfragen, Laden Wenn es zu wenige Dinge gibt, warum erwähnen Sie es dann nicht?) Im ersten Kapitel des „High-Performance Website Construction Guide“ haben wir die Bedeutung der Reduzierung von HTTP-Anfragen erwähnt. Dies ist eine sehr praktische Möglichkeit, die Front-End-Leistung von Webseiten zu verbessern und die Seitenladegeschwindigkeit zu optimieren.

Prinzip:

1. Scrollereignisse an die Seite binden

2. Beim Laden der Seite das einfügen real Die Bildadresse wird in einem bestimmten Attribut platziert.

3. Bestimmen Sie dann, ob das Element während des Scrollvorgangs in das aktuelle Browserfenster gelangt.

4. Laden Sie schließlich das Bild zu laden und zu verwenden Die Benutzererfahrung muss von Ihnen entschieden werden.

Schwierigkeit:

Browserkompatibilität ist der Grund für die Schwierigkeit , Front-End-Arbeit jeden Tag mit ihnen umgehen. Betrachten Sie die folgenden Codeteile

1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop

Zweck: Ermitteln Sie die Y-Position der aktuellen Seite relativ zur oberen linken Seite Ecke des Fensteranzeigebereichs.

DOM-Standard: window.pageYOffset;

IE-Standard: window.document.documentElement.scrollTop

2.window.innerHeight ? innerHeight: document.documentElement. clientHeight

Zweck: Deklariert die Höhe und Breite des Dokumentanzeigebereichs in Pixel

DOM-Standard: innerheight und innerwidth;

IE-Standard: document.documentElement Oder die clientWidth- und clientHeight-Eigenschaften von document.body (im Zusammenhang mit DTD) als Alternative

　3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

Zweck: Ermitteln der Position des Seitenelements.

Wenn der Browser ein Nicht-Webkit-Kernel ist, ist der document.body.scrollTop-Wert immer 0 . Verwenden Sie document.documentElement.scrollTop, um den richtigen Wert zu erhalten;

Wenn der Browser ein Webkit-Kernel ist, ist der document.documentElement.scrollTop-Wert immer 0, verwenden Sie document.body;

Ich auch Ich habe nach einer Aussage gesucht, die mit der DTD zusammenhängt (d. h. wenn auf der Seite DOCTYPE angegeben ist, wird document.documentElement verwendet; wenn DOCTYPE auf der Seite nicht angegeben ist, wird document.body verwendet. Bitte stellen Sie sicher, dass dies der Fall ist). Ich weiß, kann Ihnen helfen, darauf hinzuweisen. Vielen Dank.

Details:

1. Da sich die tatsächliche Adresse zunächst in einem bestimmten Attribut befindet (der Standardwert ist xsrc, können Sie ihn selbst festlegen), also die Standardbildadresse ist am besten Ein transparentes Ein-Pixel-Bild, das das Laden von roten Bildern vermeiden kann. Eine gute Benutzererfahrung ist das, was das Frontend immer angestrebt hat (im Beispiel widergespiegelt). . Nachdem das Bild erfolgreich geladen wurde, können Sie entsprechende Anzeigeeffekte hinzufügen (im Beispiel nicht dargestellt, Sie können es selbst ausprobieren); ------------------------- ----------- ------------------------- ----------- ------------------------- ----------- -

JavaScript-Quellcode Wie folgt:

var scrollLoad = (function (options) {

var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src ||300};

var camelize = Funktion(en) {

            return s.replace(/-(w)/g, function (strMatch, p1) {

                return p1.toUpperCase();

            });

        };

        this.getStyle = function (element, property) {

            if (arguments.length != 2) return false;

            var value = element.style [camelize(property)];

            if (!value) {

                if (document.defaultView && document.defaultView.getComputedStyle) {

                  var css = document.defaultView .getComputedStyle(element, null);

                    value = css ? css.getPropertyValue(property) : null;

               } else if (element.currentStyle) {

                  value =. element.currentStyle[camelize(property)];

                }

            }

            Rückgabewert == 'auto' ? '' : value;

        };

        var _init = function () {

            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,

                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),

                docImg = document.images ,

                _len = docImg.length;

            if (!_len) return false;

            for (var i = 0; i

                var attrSrc = docImg[i].getAttribute(defaults.src),

                  o = docImg[i], tag =. o.nodeName.toLowerCase();

                wenn ( o) {

                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));

                    if ((postPage > offsetPage && postPage offsetPage && postWindow

                      if (tag === "img" && attrSrc !== null) {

                       e("src", attrSrc );

                                               o = null;

                             }

            };

          window.onscroll = function () {

                                                                                                                                                                                . }, defaults.time);

                                                                      🎜>Demo-Download

kann einen Parameter zum Festlegen übergeben die ursprüngliche Adresse und Antwortzeit des Quellcodes

scrollLoad({

src:'userSrc', //String type

time: 100 //Number type

})