แนวคิดทั่วไปสำหรับเทคโนโลยีล่าช้ารูปภาพ
1. ตอนนี้ตั้งค่าเส้นทาง SRC ที่สอดคล้องกับองค์ประกอบ IMG เป็นภาพพื้นหลังและเส้นทาง URL ที่สอดคล้องกับ IMG จะถูกเก็บไว้ในแอตทริบิวต์ที่ตั้งค่าตัวเอง (สำหรับการแทนที่ SRC)
2. รับความสูงของรีลและความสูงของหน้าต่าง
3 การวนซ้ำต้องใช้การโหลดล่าช้าของอาร์เรย์ IMG ได้รับความสูงของ IMG และพิจารณาว่าองค์ประกอบอยู่ในหน้าต่างภาพหรือไม่ หากองค์ประกอบอยู่ในหน้าต่างที่ดูได้ SRC จะถูกแทนที่
นี่คือรหัสทดสอบ
HTML
การคัดลอกรหัสมีดังนี้:
<style>
.ห่อ {
มาร์จิ้น: 20px auto;
ความกว้าง: 150px;
-
.wrap div {
ชายแดน: 1px Dotted #E29808;
ความสูง: 30px;
ระดับความสูง: 30px;
มาร์จิ้น: 5px auto;
TEXT-ALIGN: CENTER;
ความกว้าง: 150px;
-
.wrap .sortable {
พื้นหลังสี: #e6d6ab;
ชายแดน: 1px Solid #E29808;
-
#showimg li {
ความกว้าง: 30%;
ขอบซ้าย: 2%;
ขอบด้านบน: 15px;
ความสูง: 300px;
ลอย: ซ้าย;
ความเป็นมา: #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://cdn.duitang.com/uploads/item/201306/07/20130607171626_QKC3T.thumb.600_0.jpeg"
"http://img4.duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg"
"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYWCA.THUMB.600_0.JPEG"
"http://g-ec4.images-amazon.com/images/g/28/book-catalog/liaoxiaojun/b003u5taty_01_amzn.jpg"
"http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NT AwMzIuanBn.jpg",
"http://www.yishun.net/tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjfhywfhyfhyfhyndhyndhyndhyndhyndhyndhyndhyndhyndhyndhyndhh
"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg"
"http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQJJV.thumb.600_0.jpeg"
"http://img4.duitang.com/uploads/item/201112/04/20111204170801_FIBKM.JPG"
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_ldqas.thumb.600_0.jpeg"
"http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt20110127111837.jpg"
"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hlpje.jpeg"
"http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg"
"http://img4.duitang.com/uploads/item/201206/15/20120615185646_UZMRT.thumb.600_0.jpeg"
"http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4SJ8.thumb.600_0.jpg"
"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 = "รอ" resrc = "'+imgsglobal [i]+'" /> </li>'
-
$ ("#showimg") ผนวก (str);
-
$ (เอกสาร) .ready (function () {
addimgele ();
-
(ฟังก์ชั่น (ชนะ) {
var lazyload = win ['lazyload'] || {};
var camelize = function {
return s.replace (/-(/w)/g, ฟังก์ชัน (strmatch, p1) {
ส่งคืน p1.touppercase ();
-
-
lazyload = {
init: function (imgclass) {
Var OffsetPage = window.pageyoffset?
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];
ถ้า (o) {
postpage = o.getBoundingClientRect (). top + window.document.documentelement.scrolltop + window.document.body.scrolltop;
postwindow = postpage + number (this.getStyle (o, 'ความสูง') แทนที่ ('px', ''));
if ((postpage> OffsetPage && postpage <OffsetWindow) || (postwindow> OffsetPage && postWindow <OffsetWindow)) {
var src = o.getAttribute ("resrc");
O.SetAttribute ("SRC", SRC);
O.SetAttribute ("resrc", "show");
-
-
-
-
getStyle: ฟังก์ชั่น (องค์ประกอบ, คุณสมบัติ) {
if (arguments.length! = 2) return false;
var value = element.style [camelize (คุณสมบัติ)];
ถ้า (! ค่า) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle (องค์ประกอบ, null);
ค่า = CSS?
} อื่นถ้า (element.currentstyle) {
value = element.currentstyle [camelize (คุณสมบัติ)];
-
-
ค่าส่งคืน == 'auto'? '': ค่า;
-
-
win.lazyload = lazyload;
})(หน้าต่าง);
$ (เอกสาร) .ready (function () {
lazyload.init ($ ("img.lazyimg"));
window.onscroll = function () {
lazyload.init ($ ("img.lazyimg"));
-
-