简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

js可视区域加载：getBoundingClientRect方法

php是最好的语言
Lepaskan： 2018-08-10 16:56:16
asal
3224 orang telah melayarinya

       当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。

方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getBoundingClientRect()，该方法返回一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。

getBoundingClientRect方法：

1.png

代码：





    
    
    
    可视区域加载
Salin selepas log masuk

运行结果：不知道为什么。。。结果的动图贴不上来。。。。口述一下好了：就是动画开始不加载，滚动条滚动到可以显示元素的时候才会开始加载动画。可以利用这个原理来实现图片的加载，就是图片到可视区域的时候给它赋src的值。
相关推荐：

JS图片预加载实例

查看大图点击大图隐藏 

Atas ialah kandungan terperinci js可视区域加载：getBoundingClientRect方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
js可视区域
sumber：php.cn
Artikel sebelumnya：什么是模块化编程？js 模块化编程的总结 Artikel seterusnya：最新整理的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
Artikel terbaru oleh pengarang
Isu terkini
Kemas kini berbilang baris data menggunakan gelung PDO Saya mempunyai borang yang mengambil beberapa baris data, setiap item mempunyai kawasan te...
daripada 2023-10-24 09:38:58
0
2
296
Kembangkan kawasan teks secara automatik Saya cuba membuat kawasan teks pengembangan automatik yang mudah. Ini kod saya: textarea.o...
daripada 2023-10-21 08:49:23
0
2
225
Kawasan klik anak panah slaid lebih luas daripada ikon Di tapak pembangunan WordPress saya, saya mempunyai ciri tayangan slaid untuk galeri. Apab...
daripada 2023-09-13 19:29:50
0
1
282
Imej tuding HTML: kembangkan kawasan boleh klik melebihi imej Saya agak baru untuk css/html. Saya telah menyemak imbas isu ini untuk seketika tetapi tid...
daripada 2023-09-10 16:08:26
0
1
282
Cara menambah julat teg pada perkataan tertentu dalam kawasan teks dengan mengklik pada perkataan itu (jika diklik) Apabila saya ingin menambah label pada perkataan dalam kawasan teks, label itu tidak diter...
daripada 2023-09-10 13:05:10
0
1
246
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！