2016-03-31 15 views
0

Ich möchte meine Seitengeschwindigkeit erhöhen und die Seitengeschwindigkeit wird aufgrund der Bilder auf der Seite reduziert. Ich möchte es so machen, dass wenn ein Bild aus dem Bildschirm verschwindet, ich dieses Bild verstecken oder es nur laden möchte, wenn es auf dem Bildschirm ist.Wie ausgeblendet werden Bilder?

Ich kann bereits prüfen, ob das Element außerhalb des Bildschirms ist, ich möchte wissen, wie man Bilder ausblenden kann, wenn es aus dem Bildschirm geht.

+2

Ich würde denken, dass, sobald ein Bild geladen wurde, jeder Code, um es zu entfernen oder es zu verstecken, die Dinge wahrscheinlich schlimmer machen wird, da Sie dann mehr Code benötigen, um es wieder zu laden/anzeigen usw. Das ist die Art der Optimierung sollte wahrscheinlich (und wahrscheinlich wird) auf der browser-ebene getan werden - ich würde erwarten, dass seine rendering-engine auf off-screen-elemente achten würde. –

+0

Sie können über alle Bilder iterieren, und wenn sie nicht angezeigt wird, entfernen Sie das src-Attribut und fügen Sie data-src mit dem Wert hinzu. Wenn das Bild sichtbar ist (Sie können scroll-Ereignis verwenden), können Sie das src-Attribut zurückgeben. – jcubic

+0

http://stackoverflow.com/help/how-to-ask – StefanS

Antwort

2

Die einfachste Sache einen faulen Loader wie diese verwenden würde zu tun: http://www.appelsiini.net/projects/lazyload

Sie können es so konfigurieren, dass, wenn das Bild in Sicht ist, wird es dann zu laden beginnen. Auf diese Weise würde Ihre anfängliche Ladezeit reduziert werden.

Verwandte Themen