1024programmer Java Implementation methods and ideas for delayed loading of js images_javascript skills

Implementation methods and ideas for delayed loading of js images_javascript skills

The approximate implementation method is:
Before the load of the page is triggered, put all the img in the element with the specified ID into imgs, and put the src value of all the pictures into a newly created _src attribute. , set src to the specified display image.
Then, when the scroll event of document.body is triggered, it loops to calculate whether the position of the img element in imgs is exactly within the browser display box. If so, assign the value of the _src attribute of the img element to src. This way the picture will be displayed.
The more troublesome part here is how to calculate the position of img and obtain the absolute position of the element relative to the page. OffsetLeft and offsetTop are usually used, but these two attributes are the relative position of the element pointed to by the offsetParent of the element. If the element pointed by offsetParent is set to float or uses absolute positioning, then offsetLeft is incorrect to obtain the absolute position.
Here I use the sum of the offsetTop of all parent elements of the element to obtain the absolute position of the document.

The code is as follows:


// Get the absolute X position of the element on the page
var getLeft = function(El){
var left = 0;
do{
left += El.offsetLeft;
}while((El = El.offsetParent).nodeName != ‘BODY’);
return left;
};
//Get the absolute Y position of the element on the page
var getTop = function(El){
var top = 0;
do{
top += El.offsetTop;
}while((El = El.offsetParent).nodeName != ‘BODY’);
return top;
};


When setting the scroll event of the window, IE uses document.documentElement, while other browsers use document.
The next step is to get the current position of the browser display window relative to the document. The following code is used to calculate

The code is as follows:


//Read the position of the scroll bar and the display size of the browser window
var top = isGoo? document.body. scrollTop : document.documentElement.scrollTop,
left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;


Google Chrome needs to get scrollTop through body, while other browsers use documentElement.
Finally, iteratively determine the position of img and display the image

The code is as follows:


//Batch all images to determine whether they are within the browser display area
for(var i=0; i <imgs.length; i++){
var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
//Determine whether the picture is within the display area
if( _top >= top &&
_left >= left &&
_top <= top+height &&
_left <= left+width){
var _src = imgs[i].getAttribute(‘_src’);
//Cancel if the image is already displayed Assignment
if(imgs[i].src !== _src){
imgs[i].src = _src;
}
}
}


The code that can be run

The code is as follows:
























































































This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/633041

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索