الأفكار العامة لتكنولوجيا تأخير الصورة
1. الآن اضبط مسار SRC المقابل لعنصر IMG كصورة الخلفية ، ويتم تخزين مسار URL المقابل لـ IMG في سمة محددة ذاتيًا (لاستبدال SRC).
2. احصل على ارتفاع بكرة وارتفاع النافذة
3 يتطلب الحلقات تأخير تحميل صفيف IMG ، والحصول على ارتفاع IMG ، وحدد ما إذا كان العنصر في النافذة المرئية. إذا كان العنصر في النافذة القابلة للعرض ، يتم استبدال SRC.
هنا رمز الاختبار
HTML
نسخة الكود كما يلي:
<style>
.طَوّق {
الهامش: 20 بكسل Auto ؛
العرض: 150 بكسل ؛
}
.wrap div {
الحدود: 1px منقط #E29808 ؛
الارتفاع: 30 بكسل ؛
ارتفاع الخط: 30 بكسل ؛
الهامش: 5px Auto ؛
محاذاة النص: المركز ؛
العرض: 150 بكسل ؛
}
.wrap .Sortable {
خلفية اللون: #e6d6ab ؛
الحدود: 1 بكسل Solid #E29808 ؛
}
#showimg li {
العرض: 30 ٪ ؛
الهامش اليساري: 2 ٪ ؛
الهامش: 15 بكسل ؛
الارتفاع: 300 بكسل ؛
تعويم: اليسار.
الخلفية: #CCC ؛
}
#showimg li: nth-child (3n) {
الهامش اليساري: 3 ٪ ؛
}
#showimg li img {
العرض: 100 ٪ ؛
أقصى ارتفاع: 100 ٪ ؛
}
</style>
</head>
<body>
<div id = "showimg">
<li> <img src = "http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg"/> </li>
<li> <img src = "http://cdn.duitang.com/uploads/item/201306/07/20130607171626_qkc3t.thumb.600_0.jpeg"/> </li>
<li> <img src = "http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt20110127111837.jpg"/> </li>
</div>
</body>
JS جزء
نسخة الكود كما يلي:
var imgsglobal = [
"
"
"
"http://g-ec4.images-amazon.com/images/g/28/book-catalog/liaoxiaojun/b003u5taty_01_amzn.jpg" ،
"
"http://www.yishun.net/tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9
"
"
"
"
"
"
"http://wenwen.soso.com/p/20110624/20110624085901-74594320
"
"
"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4vz8.thumb.600_0.jpg"
] ؛
وظيفة addimgele () {
var str = '' ؛
لـ (var i = 0 ، len = imgsglobal.length ؛ i <len ؛ i ++) {
str+= '<li> <img src = "wait" resrc = "'+imgsglobal [i]+'" /> </li>'
}
$ ("#showimg"). إلحاق (str) ؛
}
$ (وثيقة). ready (function () {
addimgele () ؛
}) ؛
(وظيفة (فوز) {
var lazyload = win ['lazyload'] || {} ؛
var camelize = function (s) {
إرجاع s.replace (/-(/w)/g ، الدالة (strmatch ، p1) {
إرجاع p1.touppercase () ؛
}) ؛
} ؛
lazyload = {
init: function (imgclass) {
Var Offsetpage = window.pageyoff؟
OffSetWindow = OffsetPage + number (window.innerheight؟ window.innerheight: document.documentElement.clientheight) ؛
var imgeles = imgclass ؛
لـ (var i = 0 ، len = imgeles.length ؛ i <len ؛ i ++) {
if (imgeles [i] .getattribute ("resrc") == "show") {
يكمل؛
}
var o = imgeles [i] ؛
إذا (س) {
postpage = o.getBoundingClientRect (). أعلى + window.document.documentElement.scrolltop + window.document.body.scrolltop ؛
postwindow = postpage + number (this.getStyle (o ، 'height'). استبدال ('px' ، '')) ؛
if (((postpage> OffsetPage && postpage <OffsetWindow) || (postwindow> OffsetPage && postwindow <OffsetWindow)) {
var src = o.getAttribute ("resrc") ؛
O.SetAttribute ("SRC" ، SRC) ؛
O.SetAttribute ("resrc" ، "show") ؛
}
}
}
} ،
getStyle: وظيفة (عنصر ، خاصية) {
إذا (الحجج. الطول! = 2) إرجاع خطأ ؛
var value = element.style [camelize (property)] ؛
إذا (! القيمة) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle (العنصر ، null) ؛
القيمة = CSS؟
} آخر إذا (element.currentStyle) {
value = element.currentStyle [camelize (property)] ؛
}
}
قيمة الإرجاع == "Auto"؟
}
}
win.lazyload = lazyload ؛
}) (نافذة) ؛
$ (وثيقة). ready (function () {
lazyload.init ($ ("img.lazyimg")) ؛
window.onscroll = function () {
lazyload.init ($ ("img.lazyimg")) ؛
}
}) ؛