Diskusi Pemrosesan Gambar Taobao
Halaman Taobao sangat besar, tetapi terbuka dengan sangat cepat. Pemrosesan gambar menggunakan pemuatan gulir, yang berarti di mana sumbu gulir bergulir dan di mana gambar dimuat. Tetapi jika Anda ingin memeriksa kode sumbernya, itu akan membutuhkan banyak upaya, karena kompresi kode dan penggabungan mereka dilakukan dengan baik! Karena gambar dimuat dalam gulir dan gambar tidak dimuat selama inisialisasi, maka ketika Anda menyegarkan halaman di bagian bawah halaman, halaman bawah biasanya tidak akan dimuat. Pendekatan Taobao tampaknya (karena saya tidak melihat kode sumber mereka, hanya berdasarkan operasi), menyegarkan untuk membawa halaman kembali ke atas.
Meniru taobao dan melakukan gulir gambar untuk dimuat
Berikut adalah tiga cara untuk memikirkan:
1. JavaScript Lazy Memuat Loading Area Visual
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Harooms front-end blog-visual memuat JavaScript </iteme> <tyle> img {lebar: 100%; margin-bottom: 30px; Min-Height: 400px; latar belakang-kolor: #ddd;} </tyle> </head> <body> <mmg haroomslazyload = "chrysanthemum.jpg" src = ""> <img haroomslazyLoad = "desert.jpg" src = ""> <img haroomslazy = "desert.jpg" src = ""> <img haroomsLazeLoad = "secert.jpg" src = ""> <img haroomsLAZLOAD = "SISERT.JPG" haroomslazyload = "hydrangeas.jpg" src = ""> <img haroomslazyload = "koala.jpg" src = ""> <img haroomslazyload = "lighthouse.jpg" src = ""> <img haroomslazy = "lighthouse.jpg" src = ""> <mg haroomslazeLoad = "penguins.jpg =" "> <mg HaroomsLAZLEADLOADLOADLOAD =" PENGGG "SRC =" "> <img hAROOMSLAZY =" penguins.jpg = ""> <img haroomslazy haroomslazyload = "tulips.jpg" src = ""> <script> var imgnum = document.geteLementsbyTagname ('img'). panjang; var imgobj = document.geteLementsbyTagname ("img"); var l = 0; window.onscroll = function () {var seeheight = document.documentelement.clientHeight; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; untuk (var i = l; i <imgnum; i ++) {if (imgobj [i] .offsettop <Seeheight+scrolltop) {console.log (imgobj [i] .getAttribute ("src")); console.log (imgobj [i] .src); if (imgobj [i] .getAttribute ("src") == "") {imgobj [i] .src = imgobj [i] .getAttribute ("haoroomslazyload"); }} if (imgoBj [i] .offsettop> seeheight + scrolltop) {l = i; merusak; }}}} </script>Harap perhatikan dua output konsol saya, console.log (imgobj [i] .src); Untuk mendapatkan seluruh alamat browser!
2. JQuery Lazy Memuat Loading Area Visual
JS di atas diterjemahkan dengan jQuery!
var l = 0 // js Metode terjemahan versi $ (window) .bind ("scroll", function (event) {for (var i = l; i <$ ("img"). length; i ++) {if ($ ("img"). Eq (i) .offset (). TOP <parseInt ($ ($ ("window (). if ($ ("img"). eq (i) .attr ("src") == "") {var lazyloadsrc = $ ('img'). eq (i) .attr ("haoroomslazyLoad"); if ($ ("img"). eq (i) .offset (). Top> parseInt ($ (window) .height ()) + parseInt ($ (window) .scrolltop ())) {l = i;3. Ekstensi Pemuatan Area Visual
Misalnya, efek animasi atau gambar kanvas, efek yang ingin saya capai adalah bahwa ia tidak memuat pada awalnya. Saat menggulir ke animasi atau bagan, itu akan dimuat. Kemudian kita dapat melakukan perbaikan berikut berdasarkan kode di atas:
$(window).bind("scroll", function(event){ //The height of the window + the height of the invisible top = the height of the lower part of the screen from the top var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); var thisTop = parseInt($(window).scrollTop()); //The height dari atas layar dari var picturetop = parseInt ($ (window) .offset (). Top); if (pictureTop> = Thistop && pictureTop <= thisbuttomtop) {// $); Jalankan fungsi pemuatan Anda di sini, dan fungsi pemuatan akan dipindahkan dari dokumen asli.Segarkan kembali ke atas
Saat kami melakukan pemuatan area visual, kami biasanya membiarkannya menyegarkan kembali ke atas. Seperti taobao. Segarkan kembali ke atas.
Saya tidak tahu bagaimana Taobao melakukannya. Segarkan kembali ke atas, saya menggunakan acara OnBeforeunload.
Acara OnBeforeunload dan Onunload, Onunload dan Onbeforeunload keduanya dipanggil saat menyegarkan atau ditutup. Mereka dapat ditentukan dalam skrip <script> melalui window.onunload atau di <body>. Perbedaannya adalah bahwa OnBeforeunload dieksekusi sebelum Onunload, itu juga dapat mencegah pelaksanaan Onunload.
Onbeforeunload juga dipanggil saat halaman disegarkan atau ditutup. OnBeforeunload dipanggil ketika akan pergi ke server untuk membaca halaman baru, tetapi belum mulai membacanya. Onunload telah membaca halaman baru yang perlu dimuat dari server, dan dipanggil ketika halaman saat ini akan akan diganti. Onunload tidak dapat mencegah pembaruan dan penutupan halaman. Dan OnBeforeunload dapat melakukannya.
1. Hanya onload yang dieksekusi saat halaman dimuat
2. Saat halaman ditutup, jalankan OnBeforeunload terlebih dahulu, dan akhirnya Onunload
3. Saat menyegarkan halaman, pertama -tama jalankan OnBeforeunload, lalu onunload, dan akhirnya onload.
Menyegarkan kembali ke atas adalah menggunakan acara ini, Anda dapat menulisnya seperti ini.
window.onbeforeunload = function () {$ (window) .scrolltop (0);}Ketika semua gambar di situs web digunakan tetapi area tersebut dimuat, dan CSS dan JS digabungkan dan dikompresi, kecepatan dan kinerja situs web kami akan jauh lebih baik!
Jika Anda ingin melakukannya seperti Taobao, Anda dapat meningkatkan kode.
Bahkan, gagasan pemuatan tertunda adalah untuk menempatkan gambar di data-SRC atau properti terlebih dahulu. Saat halaman meluncur ke area visual, tetapkan alamat gambar yang disimpan ke SRC.
Saya tidak akan mencantumkan kode di sini.