Uniapp Lazy Loading wird nicht wirksam

Mit der Entwicklung und Popularität des mobilen Internets entscheiden sich immer mehr Menschen für die Verwendung von Uniapp für die mobile Entwicklung. Bei der Entwicklung von Uniapp ist Lazy Loading eine sehr wichtige Technologie, die uns helfen kann, die Seitenladegeschwindigkeit zu optimieren und die Benutzererfahrung zu verbessern. Manchmal stellen wir jedoch fest, dass Lazy Loading keine Wirkung zeigt. In diesem Artikel wird dieses Problem behandelt.

1. Was ist Uniapp Lazy Loading?

Lazy Loading ist eine Optimierungsstrategie, die Bilder oder andere Medienressourcen beim Scrollen der Seite nur dann lädt, wenn diese Ressourcen in den sichtbaren Bereich gelangen, wodurch die Notwendigkeit des erstmaligen Ladens verringert wird Menge der geladenen Ressourcen, um das Laden der Seite zu beschleunigen. In uniapp können wir Lazy Loading implementieren, indem wir das Lazy-Load-Attribut festlegen oder die Schnittstelle uni.loadImage verwenden.

2. Warum schlägt das Lazy Loading von Uniapp fehl?

Wenn Sie Lazy Loading in Uniapp verwenden, es aber keine Wirkung zeigt, sind hier einige mögliche Gründe:

1 Die Höhe des Containerelements ist nicht festgelegt#🎜🎜 ##🎜 🎜#Bei Verwendung von Lazy Loading in einem Containerelement (z. B. einem Div) muss das Containerelement eine feste Höhe haben, da der Browser sonst nicht feststellen kann, ob sich das Objekt im sichtbaren Bereich befindet. Wenn das Containerelement keine Höhe festlegt, schlägt das verzögerte Laden daher fehl.

Zum Beispiel der folgende Code:

<div style="height:1000px;">
  <img src="/static/img.jpg" lazy-load />
</div>

In diesem Beispiel hat das Containerelement div eine feste Höhe, aber das Bildelement hat keine Breite und Höhe. Es ist zu beachten, dass beim dynamischen Laden des Containerelements die Höhe nach dem Laden der Containerdaten neu berechnet werden sollte.

2. Legen Sie den Beobachtungsbereich von IntersectionObserver fest.

IntersectionObserver ist eine neue API, die das verzögerte Laden von Elementen implementieren kann, aber über einen Beobachtungsbereich (Root) verfügt Der Beobachtungsbereich beim Festlegen von IntersectionObserver, sodass das verzögerte Laden fehlschlägt.

Zum Beispiel der folgende Code:

<view>
  <image src="/static/img.jpg" root="{{root}}" lazy-load />
</view>

<script>
export default {
  data () {
    return {
      root: '#my-root'
    }
  },
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

In diesem Beispiel geben wir den Beobachtungsbereich an, indem wir den Wurzelparameter von IntersectionObserver festlegen, also wann das beobachtete Element in den sichtbaren Bereich eintritt Wenn die Rückruffunktion von Lazy-Load ausgeführt wird. Wenn der Root-Parameter nicht festgelegt ist, ist das Ansichtsfenster standardmäßig der Beobachtungsbereich.

3. Das Bild wurde zwischengespeichert

Wenn das Bild vom Browser zwischengespeichert wird, wird die Bildressource nicht erneut angefordert, unabhängig davon, ob es sich im sichtbaren Bereich befindet , weil Der Browser ruft die Bildressourcen direkt aus dem Cache ab. In diesem Fall schlägt also auch das Lazy Loading fehl.

3. Wie kann das Problem des verzögerten Ladens von Uniapp gelöst werden?

1. Verwenden Sie die uni.loadImage-Schnittstelle

uni.loadImage ist die von uniapp bereitgestellte Bildladeschnittstelle, die verzögertes Laden implementieren kann. Seine Besonderheit besteht darin, dass Bilder bei Bedarf dynamisch geladen werden können, ohne dass alle Bilder geladen werden müssen. Die Verwendung dieser Schnittstelle kann viele Probleme bei LazyLoad-Fehlern lösen. Bezüglich der Verwendung von uni.loadImage gibt es eine ausführliche Einführung in der offiziellen Dokumentation, daher werde ich hier nicht näher darauf eingehen.

2. Verwenden Sie IntersectionObserver

Wenn Sie IntersectionObserver verwenden möchten, um das verzögerte Laden von Elementen zu implementieren, können Sie erwägen, das Stammelement (Root) auf „Leer“ oder „Ansichtsfenster“ zu setzen. Auf diese Weise wird das verzögerte Laden nicht aufgrund von Problemen mit der Beobachtungsreichweite fehlschlagen.

Zum Beispiel der folgende Code:

<view>
  <image src="/static/img.jpg" lazy-load />
</view>

<script>
export default {
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

In diesem Beispiel haben wir den Beobachtungsbereich (Wurzel) nicht angegeben, daher ist der Beobachtungsbereich standardmäßig das Ansichtsfenster, also Sie Kann erfolgreich verzögert geladen werden.

3. Stellen Sie die Breite, Höhe und Höhe des Bildes ein.

Wenn Breite, Höhe und Höhe des Bildes richtig eingestellt sind, ist der Effekt des verzögerten Ladens besser . Da der Browser die Größe des Bildes bestimmen kann, kann er besser feststellen, ob sich das Bild im sichtbaren Bereich befindet. Daher sollten Sie beim Lazy Loading gleichzeitig die Breite und Höhe des Bildes festlegen.

Zum Beispiel der folgende Code:

<view>
  <image src="/static/img.jpg" style="width:100%;height:300px;" lazy-load />
</view>

In diesem Beispiel legen wir die Breite und Höhe des Bildelements fest, damit der Browser genauer bestimmen kann, ob es sich darin befindet im sichtbaren Bereich.

Zusammenfassung:

Lazy Loading ist eine wesentliche Technologie in der mobilen Entwicklung, die die Seitenladegeschwindigkeit und das Benutzererlebnis verbessern kann. Es gibt viele Möglichkeiten, Lazy Loading in Uniapp zu implementieren, aber manchmal schlägt Lazy Loading fehl. In diesem Artikel werden drei mögliche Gründe für das Scheitern von LazyLoad und die Lösung dieser Probleme vorgestellt. Ich hoffe, dass er allen dabei helfen kann, die Lazy-Loading-Technologie besser zu nutzen.

Das obige ist der detaillierte Inhalt vonUniapp Lazy Loading wird nicht wirksam. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!