تأثير التنفيذ: عندما يتم سحب شريط التمرير لأسفل ، تظهر الصورة في المنطقة المرئية وتبدأ التحميل
الأفكار:
(1) علامة IMG ، ضع عنوان الصورة الحقيقي في الخصائص التي تقوم بتعيينها ، مثل Lazy-SRC
(2) احصل على ارتفاع IMG من الصفحة (في JQ ، إزاحة () أعلى) ، أصلاً:
img.getBoundingClientRect (). Top + document.body.scrolltop || document.documentElement.scrolltop
(3) تحديد ما إذا كان الموقع الذي يظهر فيه IMG في المنطقة المرئية:
في المنطقة المرئية للمتصفح ، JustTop> scrolltop && Offsettop <(scrolltop+windowHeight) ، هنا JustTop هو ارتفاع صورة Offsettop+للصورة
نسخة الكود كما يلي:
// حفظ المستند في المتغيرات لتقليل الاستعلام للوثائق
var doc = document ؛
لـ (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] .getBoundingClientRect (). TOP + SCROLLTOP ،
imgheight = this.oimg [n] .clientheight ،
JustTop = Offsettop + imgheight ؛
// حدد ما إذا كانت الصورة في المنطقة المرئية
if (justTop> scrolltop && Offsettop <(scrolltop+windowheight)) {
this.isload (HSRC ، n) ؛
}
}
}
ما يلي هو الرمز التفصيلي:
نسخة الكود كما يلي:
دالة lgy_imgscrollload (الخيار) {
this.oimg = document.getElementById (Option.wrapid) .getElementsByTagName ('img') ؛
this.sholder_src = Option.holder_src ؛
this.int () ؛
}
lgy_imgscrollload.prototype = {
LoadImg: function () {
// حفظ المستند في المتغيرات لتقليل الاستعلام للوثائق
var doc = document ؛
لـ (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] .getBoundingClientRect (). TOP + SCROLLTOP ،
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 ،
ن = ن ،
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 = هذا ،
مؤقت = فارغ ؛
// scroll: أضف مؤقتًا لمنع المكالمات المتكررة لتحميل وظيفة
window.onscroll = function () {
ClearTimeout (مؤقت) ؛
Timer = setTimeOut (function () {
_ that.loadimg () ؛
} ، 100) ؛
}
}
}
صورة التكاثر:
ما سبق هو كل شيء عن هذا المقال. تأثير التنفيذ ليس أسوأ من تأثير المكون الإضافي jQuery. الرمز أبسط. يرجى الرجوع إليها.