เอฟเฟกต์การใช้งาน: เมื่อดึงแถบเลื่อนลงมาภาพจะปรากฏขึ้นในพื้นที่ที่มองเห็นได้และเริ่มโหลด
แนวคิด:
(1) แท็ก IMG ใส่ที่อยู่ภาพจริงในคุณสมบัติที่คุณตั้งค่าเช่น Lazy-SRC
(2) รับความสูงของ IMG จากหน้า (ใน JQ, Offset (). ด้านบน), natively:
img.getBoundingClientRect (). top + document.body.scrolltop || documentEnumentElement.scrolltop
(3) พิจารณาว่าตำแหน่งที่ IMG ปรากฏขึ้นอยู่ในพื้นที่ที่มองเห็นได้หรือไม่:
. ในพื้นที่ที่มองเห็นได้ของเบราว์เซอร์, justtop> scrolltop && Offsettop <(scrolltop+windowheight) ที่นี่ Justtop คือความสูงของภาพ Offsettop+ของภาพ
การคัดลอกรหัสมีดังนี้:
// บันทึกเอกสารในตัวแปรเพื่อลดการสืบค้นเป็นเอกสาร
var doc = เอกสาร;
สำหรับ (var n = 0, i = this.oimg.length; n <i; n ++) {
// รับที่อยู่ภาพตัวยึดภาพ
var hsrc = this.oimg [n] .getAttribute (this.sholder_src);
ถ้า (HSRC) {
var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop,
windowheight = doc.documentelement.clientheight
Offsettop = this.oimg [n]
imgheight = this.oimg [n] .clientheight,
JustTop = Offsettop + Imgheight;
// ตรวจสอบว่ารูปภาพอยู่ในพื้นที่ที่มองเห็นได้หรือไม่
if (justtop> scrolltop && Offsettop <(scrolltop+windowheight)) {
this.isload (hsrc, n);
-
-
-
ต่อไปนี้เป็นรหัสโดยละเอียด:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น lgy_imgscrollload (ตัวเลือก) {
this.oimg = document.getElementById (ตัวเลือก. wrapid) .getElementsByTagname ('img');
this.sholder_src = opotion.holder_src;
this.int ();
-
lgy_imgscrollload.prototype = {
loadimg: function () {
// บันทึกเอกสารในตัวแปรเพื่อลดการสืบค้นเป็นเอกสาร
var doc = เอกสาร;
สำหรับ (var n = 0, i = this.oimg.length; n <i; n ++) {
// รับที่อยู่ภาพตัวยึดภาพ
var hsrc = this.oimg [n] .getAttribute (this.sholder_src);
ถ้า (HSRC) {
var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop,
windowheight = doc.documentelement.clientheight
Offsettop = this.oimg [n]
imgheight = this.oimg [n] .clientheight,
JustTop = Offsettop + Imgheight;
// ตรวจสอบว่ารูปภาพอยู่ในพื้นที่ที่มองเห็นได้หรือไม่
if (justtop> scrolltop && Offsettop <(scrolltop+windowheight)) {
// Alert (offsettop);
this.isload (hsrc, n);
-
-
-
-
ISLOAD: function (src, n) {
var src = src
n = n,
o_img = ภาพใหม่ ()
_that = สิ่งนี้;
o_img.onload = (ฟังก์ชั่น (n) {
_that.oimg [n] .setAttribute ('src', src);
_that.oimg [n] .removeattribute (_that.sholder_src);
}) (n);
o_img.src = src;
-
int: function () {
this.loadimg ();
var _that = สิ่งนี้
จับเวลา = null;
// Scroll: เพิ่มตัวจับเวลาเพื่อป้องกันการโทรบ่อย ๆ ไปยังฟังก์ชัน loadimg
window.onscroll = function () {
ClearTimeout (ตัวจับเวลา);
timer = settimeout (function () {
_that.loadimg ();
}, 100);
-
-
-
ภาพการทำซ้ำ:
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ เอฟเฟกต์การใช้งานไม่เลวร้ายไปกว่าปลั๊กอิน jQuery รหัสนั้นง่ายกว่า โปรดดูที่