javascript - Apakah prinsip memuatkan imej pada Zhihu?

Question

Pada mulanya, semuanya kabur, dan apabila ia berada dalam julat paparan skrin, ia akan dipaparkan dalam definisi tinggi.

Adakah ia memuatkan imej piksel rendah pra-diproses pada permulaan dan kemudian memaparkan imej definisi tinggi?

Atau adakah kaedah lain?

Answer 1

Pemahaman saya muatkan imej kecil dahulu, kemudian gunakan penapis css3 untuk mengaburkannya, dan kemudian memuatkannya dengan malas Selepas imej besar dimuatkan, gantikan src.

Untuk butiran, sila rujuk artikel ini http://www.jackpu.com/medium-...

Answer 2

penapis: kabur(10px), memuatkan penapis selesai: kabur(0)

Answer 3

Zhihu menggunakan kanvas untuk mengaburkan imej kecil seperti Medium dan mengalih keluar imej besar selepas dimuatkan. Kelebihannya ialah ia boleh mengawal algoritma kabur, tetapi kelemahannya ialah ia agak berat.

Saya menggunakan kaedah lalai penyemak imbas untuk mengaburkan imej kecil untuk membuat peralihan, https://blog.crimx.com/2016/1..., kelebihannya ialah ia agak ringan dan mempunyai keserasian yang baik, tetapi imej kecil mesti dikaburkan terlebih dahulu Barulah kita dapat hasil yang lebih baik. Anda boleh menggunakan CSS blur tanpa mengira keserasian.

Answer 4

Prinsipnya hampir sama seperti yang dinyatakan di atas. Di sini saya juga membuat komponen vue, yang boleh saya gunakan sendiri
vue-img-loader