Jquery implements delayed image loading

The Jquery plug-in on the Internet is not easy to use. You will know it after you try it.

Helpless, I wrote a piece of code myself

$ (Function (){
Var CPos = function (x, y) {this. x = x; this. y = y ;}
Var GetObjPos = function (ATarget ){
Var target = ATarget;
Var pos = new CPos (target. offsetLeft, target. offsetTop );

Var target = target. offsetParent;
While (target ){
Pos. x + = target. offsetLeft;
Pos. y + = target. offsetTop;

Target = target. offsetParent;
}
Return pos;
}

Var reload = function (){
$ ('Img. lazy '). each (function (){
Var o = $ (this );
If (! O. attr ('data-original') return true;
If (o. attr ('src') = o. attr ('data-original') return true;

Var top = GetObjPos (this) ['y'];
If (top = 0) return true;

Var t=(document.doc umentElement & document.doc umentElement. scrollTop )? Document.doc umentElement. scrollTop: document. body. scrollTop;

If (top <t + document.doc umentElement. clientHeight + 400 & top + 400> t ){
Var org = o. attr ('data-original ');
O. attr ('src', org );
};
Return true;
})
}
$ (Window). resize (reload)
SetInterval (reload, 1000)
})

The above is called when the window size changes, and is called every second (if it is placed in a rolling event, leading to a card screen)

The above 400 is the pre-loaded height and can be adjusted

Image HTML:

Data-original = "Real Image address" alt = "{$ title}" width = "210px" height = "165px"/>