Simple implementation of javascript delayed loading technology (lazyload)

Simple implementation of javascript delayed loading technology (lazyload)_javascript skills

WBOY

Release： 2016-05-16 18:11:52

Original

941 people have browsed it

1. Foreword
Lazy loading technology (referred to as lazyload) is not a new technology. It is a solution for js programmers to optimize web page performance. The core of lazyload is on-demand loading. Lazyload can be found in large websites. For example, Google's image search page, Thunder homepage, Taobao, QQ space, etc. Therefore, mastering lazyload technology is a good choice. Unfortunately, the jquery plug-in lazy load official website (http://www.appelsiini.net/projects/lazyload) says it does not support it. New version of browser.

2. In what situations is lazyload more suitable?
It involves pictures, flash resources, iframes, web page editors (similar to FCK), etc., which take up a lot of bandwidth, and these modules are not available in browsers for the time being. Within the viewport, you can use lazyload to load this type of resource at the appropriate time. Avoid loading too many resources when the web page is opened and making users wait too long.

3. How to implement lazyload?
Difficulties of lazyload How to load the resources that the user needs at the appropriate time (the resources that the user needs here refer to the resources that are presented in the browser's visible area). Therefore, we need to know several pieces of information to determine whether the target has been presented in the client area, including:
　1. The position of the visual area relative to the top of the browser
2. The position of the resource to be loaded relative to the top of the browser.
After obtaining the above two points of data, you can use the following function to determine whether an object is in the browser's visible area.

Copy code The code is as follows:

 
 // Return the browser’s visible area position 
 function getClient(){ 
 var l,t,w,h; 
 l = document.documentElement.scrollLeft || document.body.scrollLeft; 
 t = document.documentElement.scrollTop || document.body.scrollTop; 
 w = document.documentElement.clientWidth; .documentElement.clientHeight; 
 Return {'left':l,'top':t,'width':w,'height':h} ; 
 } 
 //Return to the location of the resource to be loaded
 function getSubClient(p){ 
 var l = 0,t = 0,w,h; 
 w = p.offsetWidth; 
 h = p.offsetHeight; 
 while(p.offsetParent ){ 
　l = p.offsetLeft; 
　t = p.offsetTop; 
　 p = p.offsetParent; 'width':w,'height':h } ; 
} 

 
　The function getClient() returns the browser client area area information, and getSubClient() returns the target module area information. At this time, determining whether the target module appears in the client area is actually determining whether the above two rectangles intersect. 

Copy code The code is as follows: // Determine whether two rectangles intersect and return a Boolean value

function intens(rec1,rec2){

 var lc1,lc2,tc1,tc2,w1,h1; 
 lc1 = rec1.left rec1.width / 2; 
 lc2 = rec2.left rec2.width / 2; 
 tc1 = rec1.top rec1.height / 2; 
 tc2 = rec2.top rec2 .height / 2; 
　 w1 = (rec1.width rec2.width) / 2; 
　 h1 = (rec1.height rec2.height) / 2; 
 return Math.abs(lc1 - lc2) < ; w1 && Math.abs(tc1 - tc2) < h1 ; 
　 } 

 
 Now we can basically implement delayed loading. Next, we write some in the window.onscroll event The code monitors whether the target area is rendered in the client area. 

Copy the code The code is as follows: 　< div style = "width:100px; height:3000px">