javascript - Apabila menggunakan window.location.href untuk melompat ke halaman, bagaimana untuk mencapai kesan pemuatan sebelum halaman baharu dimuatkan sepenuhnya?
漂亮男人2017-05-19 10:45:07
0
4
1772
Menggunakan window.location.href untuk lompat halaman, bagaimana untuk mencapai kesan pemuatan sebelum halaman baharu dimuatkan sepenuhnya?
Jika saya, saya akan melakukan ini: 1 Anda boleh menambah kesan pemuatan pada halaman yang window.location.href melompat ke. 2. Jika tiada cara untuk mengubah suai kandungan halaman lompat window.location.href, saya akan menggunakan ajax untuk meminta halaman, memasukkan html ke dalam halaman semasa dan memuatkannya pada masa meminta halaman.
Lompatan location.href akan menyebabkan halaman dimuat semula sepenuhnya, yang tiada kaitan dengan halaman sebelumnya.
Halaman dihuraikan dari atas ke bawah Jika pemuatan diletakkan di bahagian atas, ia secara semula jadi akan dimuatkan terlebih dahulu, namun, jika imej digunakan, imej dimuat turun secara tidak segerak, jadi susunan tidak boleh dikawal dan imej mungkin berlalu. dalam sekelip mata.
Jika anda mesti melihatnya, anda boleh menggunakan pemuatan bukan gambar, kemudian sembunyikan kandungan lain dahulu, hanya pemuatan muncul, dan kemudian paparkannya selepas pemuatan dicetuskan sepenuhnya.
Gunakan window.location.href untuk melengkapkan lompatan halaman Ini serta-merta, jadi tidak boleh dipercayai untuk melakukan loading pada halaman lompat (A). window.location.href去完成页面的跳转，这是瞬发的，所以在跳转页(A)做loading是不靠谱的。
Kemudian kesan loading hendaklah diletakkan pada halaman yang akan diubah hala (B). Walau bagaimanapun, atribut src bagi teg img adalah tidak segerak Jika ia tidak dikawal oleh js, maka anda tidak boleh menjamin bahawa img masa memuatkan, pada masa ini anda boleh cuba menggunakan kesan loadingcss yang ditulis terus ke dalam fail templat dan mematikan selepas halaman sedang dimuatkan. Kesan loading css. 🎜
Adakah anda mempunyai sebarang keperluan keserasian untuk ini? Anda juga boleh menambah lapisan pemuatan pada lompatan dan mengawalnya dengan js Saya menulis contoh: https://www.mnzld.net/demo/lo...
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika saya, saya akan melakukan ini:
1 Anda boleh menambah kesan pemuatan pada halaman yang window.location.href melompat ke.
2. Jika tiada cara untuk mengubah suai kandungan halaman lompat window.location.href, saya akan menggunakan ajax untuk meminta halaman, memasukkan html ke dalam halaman semasa dan memuatkannya pada masa meminta halaman.
Lompatan location.href akan menyebabkan halaman dimuat semula sepenuhnya, yang tiada kaitan dengan halaman sebelumnya.
Halaman dihuraikan dari atas ke bawah Jika pemuatan diletakkan di bahagian atas, ia secara semula jadi akan dimuatkan terlebih dahulu, namun, jika imej digunakan, imej dimuat turun secara tidak segerak, jadi susunan tidak boleh dikawal dan imej mungkin berlalu. dalam sekelip mata.
Jika anda mesti melihatnya, anda boleh menggunakan pemuatan bukan gambar, kemudian sembunyikan kandungan lain dahulu, hanya pemuatan muncul, dan kemudian paparkannya selepas pemuatan dicetuskan sepenuhnya.
Gunakan
window.location.hrefuntuk melengkapkan lompatan halaman Ini serta-merta, jadi tidak boleh dipercayai untuk melakukanloadingpada halaman lompat (A).window.location.href去完成页面的跳转，这是瞬发的，所以在跳转页(A)做loading是不靠谱的。那么
Kemudian kesanloading效果是应该放到被跳转页(B)来做。但是img标签src属性是异步的，如果不是用js去控制的话，那么这时你也无法保证img加载的时间，这个时候可以试着用直接写进模板文件当中的css的loading效果来做，等页面加载完了之后关掉css的loadingloadinghendaklah diletakkan pada halaman yang akan diubah hala (B). Walau bagaimanapun, atributsrcbagi tegimgadalah tidak segerak Jika ia tidak dikawal olehjs, maka anda tidak boleh menjamin bahawaimg masa memuatkan, pada masa ini anda boleh cuba menggunakan kesanloadingcssyang ditulis terus ke dalam fail templat dan mematikanselepas halaman sedang dimuatkan. Kesan. 🎜loadingcssAdakah anda mempunyai sebarang keperluan keserasian untuk ini? Anda juga boleh menambah lapisan pemuatan pada lompatan dan mengawalnya dengan js
Saya menulis contoh:
https://www.mnzld.net/demo/lo...