Rumah hujung hadapan web tutorial js 使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

May 16, 2016 pm 04:50 PM
Memuatkan imej

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。

一、load事件

复制代码 代码如下:





img - load event


使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

loading...






测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。

二、readystatechange事件
复制代码 代码如下:





img - readystatechange event


使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

loading...






readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。

三、img的complete属性
复制代码 代码如下:





img - complete attribute


使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

loading...






轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧 
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengoptimumkan masalah paparan kegagalan memuatkan imej dalam pembangunan Vue Bagaimana untuk mengoptimumkan masalah paparan kegagalan memuatkan imej dalam pembangunan Vue Jun 29, 2023 am 10:51 AM

Bagaimana untuk mengoptimumkan masalah paparan kegagalan memuatkan imej dalam pembangunan Vue Dalam pembangunan Vue, kami sering menghadapi senario di mana imej perlu dimuatkan. Walau bagaimanapun, disebabkan oleh rangkaian yang tidak stabil atau ketiadaan imej, besar kemungkinan imej tersebut akan gagal dimuatkan. Masalah sedemikian bukan sahaja menjejaskan pengalaman pengguna, tetapi juga boleh membawa kepada pembentangan halaman yang mengelirukan atau kosong. Untuk menyelesaikan masalah ini, artikel ini akan berkongsi beberapa kaedah untuk mengoptimumkan paparan kegagalan pemuatan imej dalam pembangunan Vue. Gunakan gambar lalai: Dalam komponen Vue, anda boleh menetapkan gambar lalai,

Bagaimana untuk menyelesaikan masalah bahawa pelayar Edge tidak dapat memuatkan imej Bagaimana untuk menyelesaikan masalah bahawa pelayar Edge tidak dapat memuatkan imej Jan 30, 2024 am 10:54 AM

Apakah yang perlu saya lakukan jika imej tidak boleh dimuatkan dalam pelayar tepi? Pelayar tepi ialah penyemak imbas lalai yang digunakan oleh ramai rakan untuk melayari Internet, dan boleh menyediakan pengguna dengan perkhidmatan Internet yang mudah. Walau bagaimanapun, beberapa rakan mendapati bahawa imej dalam halaman web pelayar tepi tidak dapat dimuatkan secara normal semasa melayari Internet Selepas menolak masalah rangkaian, masalah yang paling mungkin adalah tetapan Jika anda ingin menyelesaikan masalah ini, ikuti sahaja editor Mari kita lihat penyelesaian mengapa imej tidak boleh dipaparkan. Apakah yang perlu saya lakukan jika imej dalam pelayar tepi tidak boleh dimuatkan 1. Klik Mula di sudut kiri bawah dan klik kanan "Microsoft Edge". 2. Pilih "Lagi" dan klik "Tetapan Apl". 3. Tatal ke bawah untuk mencari "Gambar". 4. Hidupkan suis di bawah gambar.

Vue malas memuatkan penyelesaian masalah kegagalan imej Vue malas memuatkan penyelesaian masalah kegagalan imej Jun 29, 2023 pm 10:42 PM

Bagaimana untuk menyelesaikan masalah kegagalan memuatkan malas imej dalam pembangunan Vue Memuatkan malas (LazyLoad) adalah salah satu teknologi pengoptimuman yang biasa digunakan dalam pembangunan web moden Terutama apabila memuatkan sejumlah besar imej dan sumber, ia dapat mengurangkan beban dengan berkesan halaman dan meningkatkan pengalaman pengguna. Walau bagaimanapun, apabila membangunkan menggunakan rangka kerja Vue, kadangkala kita mungkin menghadapi masalah kegagalan memuatkan imej yang malas. Artikel ini akan memperkenalkan beberapa masalah dan penyelesaian biasa supaya pembangun dapat menangani masalah ini dengan lebih baik. Ralat laluan sumber imej Pertama, kita perlu memastikan bahawa sumber imej

Bagaimana untuk menyelesaikan masalah bahawa imej Windows 11 Microsoft Store tidak boleh dimuatkan Bagaimana untuk menyelesaikan masalah bahawa imej Windows 11 Microsoft Store tidak boleh dimuatkan Jun 29, 2023 pm 03:43 PM

Bagaimana untuk menyelesaikan masalah bahawa imej Windows 11 Microsoft Store tidak boleh dimuatkan? Di Microsoft Store, kami boleh mencari dan memuat turun pelbagai perisian dan permainan dengan mudah Walau bagaimanapun, baru-baru ini beberapa pengguna Win11 mendapati bahawa imej Microsoft Store pada komputer mereka tidak boleh dimuatkan, yang sangat mempengaruhi pengalaman pengguna situasi apa? Mari kita lihat bagaimana editor menyelesaikannya. Penyelesaian kepada masalah bahawa imej Win11 Microsoft Store tidak boleh dimuatkan 1. Klik kanan menu mula di bawah untuk masuk. 2. Klik untuk memilih Rangkaian dan Internet untuk masuk. 3. Anda boleh menyemak sama ada sambungan rangkaian anda normal. 4. Anda boleh menukar konfigurasi rangkaian daripada peribadi kepada awam.

Cara menggunakan cache pembangunan PHP untuk mengoptimumkan kelajuan memuatkan imej Cara menggunakan cache pembangunan PHP untuk mengoptimumkan kelajuan memuatkan imej Nov 08, 2023 pm 05:58 PM

Cara menggunakan PHP untuk membangunkan cache dan mengoptimumkan kelajuan memuatkan imej Dengan perkembangan pesat Internet, kelajuan memuatkan halaman web telah menjadi salah satu faktor penting dalam pengalaman pengguna. Kelajuan memuatkan imej adalah salah satu faktor penting yang mempengaruhi kelajuan memuatkan halaman web. Untuk mempercepatkan pemuatan imej, kita boleh menggunakan cache pembangunan PHP untuk mengoptimumkan kelajuan pemuatan imej. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan cache untuk mengoptimumkan kelajuan pemuatan imej dan memberikan contoh kod khusus. 1. Prinsip cache Cache ialah teknologi untuk menyimpan data dengan menyimpan data sementara dalam memori berkelajuan tinggi.

Bagaimana untuk menyelesaikan masalah bahawa imej halaman web tidak boleh dimuatkan Bagaimana untuk menyelesaikan masalah bahawa imej halaman web tidak boleh dimuatkan Jan 08, 2024 pm 01:45 PM

Apabila ramai rakan membuka halaman web, mereka mendapati bahawa imej pada halaman web tidak boleh dimuatkan dan tanda × dipaparkan. Mungkin kelajuan Internet anda terlalu rendah, tunggu sebentar, atau mungkin mod yang berkaitan tidak dihidupkan dalam tetapan Mari kita lihat penyelesaian kepada masalah imej halaman web tidak dimuatkan . Imej halaman web tidak boleh dimuatkan: 1. Masalah kelajuan Internet Halaman web tidak dapat memaparkan imej Ia mungkin kerana kelajuan Internet komputer agak perlahan, terdapat banyak perisian yang dibuka pada komputer, dan imej yang kami akses agak besar. yang mungkin disebabkan oleh tamat masa pemuatan Jika gambar tidak dapat dipaparkan, anda boleh mematikan perisian yang menggunakan lebih kelajuan rangkaian dan menyemaknya dalam pengurus tugas. 2. Jika pengunjung terlalu ramai dan laman web tidak dapat memaparkan gambar tersebut, mungkin disebabkan laman web yang kita lawati.

Apakah yang perlu saya lakukan jika imej yang saya semak imbas tidak boleh dimuatkan dalam Windows 7? Apakah yang perlu saya lakukan jika imej yang saya semak imbas tidak boleh dimuatkan dalam Windows 7? Jul 19, 2023 pm 02:57 PM

Apabila anda menyemak imbas web, pernahkah anda menghadapi situasi di mana imej tidak boleh dimuatkan Jadi apakah sebabnya? Apakah yang perlu saya lakukan jika imej yang saya semak imbas dalam Windows 7 tidak boleh dimuatkan? Bagi pengguna yang mengalami masalah ini, sila lihat Xiaobian berikut untuk berkongsi dengan anda penyelesaian kepada masalah yang Win7 tidak dapat memuatkan imej semasa menyemak imbas. 1. Mula-mula, kami mula-mula menentukan sama ada halaman web ditetapkan untuk tidak memaparkan imej. Kami mengklik Pilihan Alat-Internet di penjuru kanan sebelah atas penyemak imbas dan beralih ke Lanjutan. Jika kita seret ke Multimedia, akan ada pilihan untuk memaparkan imej, yang perlu diperiksa di hadapan. 2. Seterusnya, mari kita semak sama ada versi flashplayer ialah versi terkini. kaedah pengesanan. Klik Mula, kemudian pilih Panel Kawalan dan cari flashplaye dalam Panel Kawalan

Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej Aug 18, 2023 pm 12:05 PM

Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej Dalam pembangunan web moden, mengoptimumkan pemuatan imej adalah topik penting. Dengan pembangunan reka bentuk web, imej telah menjadi sebahagian daripada halaman. Walau bagaimanapun, imej yang terlalu besar atau tidak dioptimumkan boleh menyebabkan halaman web dimuatkan dengan perlahan, menjejaskan pengalaman pengguna. Oleh itu, mempelajari cara mengoptimumkan pemuatan imej adalah kemahiran yang harus dikuasai oleh setiap pembangun PHP. Berikut akan memperkenalkan beberapa kaedah yang biasa digunakan untuk mengoptimumkan pemuatan imej dan contoh kod PHP yang sepadan. Kami akan mulakan dengan imej termampat, pemuatan malas dan bait

See all articles