javascript - Apakah prinsip memuatkan imej pada Zhihu?

Question

Pada mulanya, semuanya kabur, kemudian apabila dalam paparan skrin, ia dalam definisi tinggi. Adakah ia memuatkan imej piksel rendah pra-diproses pada permulaan dan kemudian memaparkan imej definisi tinggi? Atau, adakah kaedah lain?

仅有的幸福 · Answer

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

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

曾经蜡笔没有小新 · Answer

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

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

javascript - Apakah prinsip memuatkan imej pada Zhihu?

membalas semua(4)saya akan balas