pemuatan malas uniapp tidak berkuat kuasa

Dengan perkembangan dan populariti Internet mudah alih, semakin ramai orang memilih untuk menggunakan uniapp untuk pembangunan mudah alih. Dalam pembangunan uniapp, pemuatan malas ialah teknologi yang sangat penting, yang boleh membantu kami mengoptimumkan kelajuan pemuatan halaman dan meningkatkan pengalaman pengguna. Walau bagaimanapun, kadangkala kami mendapati bahawa pemuatan malas tidak berkuat kuasa Artikel ini akan membincangkan isu ini.

1. Apakah uniapp lazy loading?

Pemuatan malas ialah strategi pengoptimuman yang memuatkan imej atau sumber media lain secara dinamik apabila halaman sedang menatal sumber ini hanya dimuatkan apabila ia memasuki julat yang boleh dilihat, dengan itu mengurangkan masa yang diperlukan untuk pemuatan pertama untuk mempercepatkan pemuatan halaman. Dalam uniapp, kita boleh melaksanakan pemuatan malas dengan menetapkan atribut muat malas atau menggunakan antara muka uni.loadImage.

2. Mengapa pemuatan malas uniapp gagal?

Jika anda menggunakan pemuatan malas dalam uniapp tetapi ia tidak berkesan, berikut adalah beberapa sebab yang mungkin:

1 Ketinggian elemen bekas tidak ditetapkan

Dalam elemen kontena ( Contohnya, apabila lazy loading digunakan dalam div), elemen kontena mesti mempunyai ketinggian tetap, jika tidak, penyemak imbas tidak dapat menentukan sama ada objek berada dalam kawasan yang boleh dilihat. Oleh itu, jika elemen kontena tidak menetapkan ketinggian, pemuatan malas akan gagal.

Contohnya, kod berikut:

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

Dalam contoh ini, div elemen bekas mempunyai ketinggian tetap, tetapi elemen gambar tidak mempunyai lebar dan tinggi. Perlu diingat bahawa apabila elemen kontena dimuatkan secara dinamik, ketinggian harus dikira semula selepas data kontena dimuatkan.

2. Tetapkan skop pemerhatian IntersectionObserver

IntersectionObserver ialah API baharu yang boleh melaksanakan pemuatan elemen yang malas, tetapi ia mempunyai skop pemerhatian (root Jika kita menetapkan IntersectionObserver Jika pemerhatian). julat ditentukan, pemuatan malas akan gagal.

Sebagai contoh, kod berikut:

<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>

Dalam contoh ini, kami menentukan julat pemerhatian dengan menetapkan parameter akar IntersectionObserver, jadi apabila elemen yang diperhatikan memasuki kawasan yang boleh dilihat, ia akan Laksanakan fungsi panggil balik lazy-load. Jika parameter akar tidak ditetapkan, port pandangan akan menjadi skop pemerhatian secara lalai.

3. Imej telah dicache

Apabila imej dicache oleh penyemak imbas, tidak kira sama ada ia berada dalam kawasan yang boleh dilihat, sumber imej tidak akan diminta lagi, kerana penyemak imbas akan terus Dapatkan sumber imej daripada cache. Jadi dalam kes ini, memuatkan malas juga akan gagal.

3. Bagaimana untuk menyelesaikan masalah malas memuatkan uniapp?

1. Gunakan antara muka uni.loadImage

uni.loadImage ialah antara muka memuatkan imej yang disediakan oleh uniapp, yang boleh melaksanakan pemuatan malas. Cirinya ialah ia boleh memuatkan imej secara dinamik apabila diperlukan tanpa perlu memuatkan semua imej. Menggunakan antara muka ini boleh menyelesaikan banyak masalah kegagalan LazyLoad. Mengenai penggunaan uni.loadImage, terdapat pengenalan terperinci dalam dokumentasi rasmi, jadi saya tidak akan menerangkan butiran di sini.

2. Gunakan IntersectionObserver

Jika anda ingin menggunakan IntersectionObserver untuk melaksanakan pemuatan malas elemen, anda boleh mempertimbangkan untuk menetapkan elemen akar (root) kepada kosong atau viewport. Dengan cara ini, pemuatan malas tidak akan gagal disebabkan oleh isu julat pemerhatian.

Contohnya, kod berikut:

<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>

Dalam contoh ini, kami tidak menentukan julat pemerhatian (root), jadi julat pemerhatiannya lalai kepada viewport, supaya pemuatan malas boleh berjaya .

3. Tetapkan lebar, tinggi dan tinggi imej

Apabila lebar, tinggi dan tinggi imej ditetapkan dengan betul, kesan pemuatan malas akan menjadi lebih baik. Oleh kerana penyemak imbas boleh menentukan saiz imej, ia boleh menentukan dengan lebih baik sama ada imej itu berada dalam kawasan yang boleh dilihat. Oleh itu, apabila menggunakan pemuatan malas, anda harus menetapkan lebar dan ketinggian imej pada masa yang sama.

Sebagai contoh, kod berikut:

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

Dalam contoh ini, kami menetapkan lebar dan tinggi elemen imej supaya penyemak imbas boleh menentukan dengan lebih tepat sama ada ia berada dalam kawasan yang boleh dilihat .

Ringkasan:

Pemuatan malas ialah teknologi penting dalam pembangunan mudah alih, yang boleh meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna. Terdapat banyak cara untuk melaksanakan pemuatan malas dalam uniapp, tetapi kadangkala pemuatan malas gagal. Artikel ini memperkenalkan tiga kemungkinan sebab kegagalan LazyLoad dan cara menyelesaikan masalah ini. Saya harap ia dapat membantu semua orang menggunakan teknologi pemuatan malas dengan lebih baik.

Atas ialah kandungan terperinci pemuatan malas uniapp tidak berkuat kuasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!