1. Preface
Lazy loading technology (abbreviated as lazyload) is not a new technology. It is a solution for js programmers to optimize web performance. The core of lazyload is loading on demand. Lazyload is available in large websites, such as 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 (/projects/lazyload) says that it does not support the new version of the browser.
In which occasion is the most suitable application?
It involves images, falsh resources, iframes, web editors (similar to FCK), etc., and these modules are not in the browser's viewing area for the time being. Therefore, lazyload can be used to load this type of resource at appropriate times. Avoid loading too many resources when the web page is opened, causing users to wait too long.
3. How to implement lazyload?
The difficulty of lazyload lies in how to load the resources required by the user at the appropriate time (here the resources required by the user refer to the resource being presented in the browser's visual area). Therefore, we need to know several information to determine whether the target has been presented in the client area, including:
1. The visual area relative to the top of the browser
2. The resource to be loaded relative to the top of the browser.
After obtaining the above two points of data, the following functions can be used to find out whether an object is in the browser's visual area.
//Return to the viewable area location of the browser
function getClient(){
var l,t,w,h;
l = || ;
t = || ;
w = ;
h = ;
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 = ;
h = ;
while(){
l += ;
t += ;
p = ;
}
return {'left':l,'top':t,'width':w,'height':h } ;
}
Where 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 two rectangles as above intersect.
//Judge whether two rectangles intersect and return a boolean value
function intens(rec1,rec2){
var lc1,lc2,tc1,tc2,w1,h1;
lc1 = + / 2;
lc2 = + / 2;
tc1 = + / 2 ;
tc2 = + / 2 ;
w1 = ( + ) / 2 ;
h1 = ( + ) / 2;
return (lc1 - lc2) < w1 && (tc1 - tc2) < h1 ;
}
Now we can basically implement delayed loading. Next, we write some code in the event to monitor whether the target area is presented in the client area.
<div style = "width:100px; height:3000px"></div>
<div id = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
</div>
var d1 = ("d1");
= function(){
var prec1 = getClient();
var prec2 = getSubClient(d1);
if(intens(prec1,prec2)){
alert("true")
}
}
We just need to load the resources we need in the popup window.
It is worth noting here that when the target object is presented in the customer area, it will pop up the window as it scrolls. Therefore, we need to cancel the monitoring of the area after the first window pops up, and use an array to collect the objects that need to be monitored. Also note: because the onscroll event and onresize event will change the viewing area information of the browser, after this type of event is triggered, it is necessary to recalculate whether the target object is in the viewing area. This is implemented using the autocheck() function. (The lazyload on the homepage of Thunder does not recalculate whether the target object is in the viewing area of the browser in the onresize event. Therefore, if the browser window is reduced to a certain size first, then scroll to the area where the picture needs to be loaded and then click to maximize, the picture cannot be loaded, haha, you need to pay attention in the future).
Add element:<div id = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">
//Compare whether a sub-region is presented in the browser area
function jiance(arr,prec1,callback){
var prec2;
for(var i = - 1 ; i >= 0 ;i--){
if(arr[i]){
prec2 = getSubClient(arr[i]);
if(intens(prec1,prec2)){
callback(arr[i]);
//After loading the resource, delete the monitoring
delete arr[i];
}
}
}
}
//Detection whether the target object appears in the client area
function autocheck(){
var prec1 = getClient();
jiance(arr,prec1,function(obj){
//Loading resources...
alert()
})
}
//Subregion 1
var d1 = ("d1");
//Subregion 2
var d2 = ("d2");
//The area collection needs to be loaded as needed
var arr = [d1,d2];
= function(){
//Recalculate
autocheck();
}
= function(){
//Recalculate
autocheck();
}
Now we only need to load the resources we need in the pop-up window. The source code will not be posted. If you need friends or have questions, you can contact me.
Lazy loading technology (abbreviated as lazyload) is not a new technology. It is a solution for js programmers to optimize web performance. The core of lazyload is loading on demand. Lazyload is available in large websites, such as 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 (/projects/lazyload) says that it does not support the new version of the browser.
In which occasion is the most suitable application?
It involves images, falsh resources, iframes, web editors (similar to FCK), etc., and these modules are not in the browser's viewing area for the time being. Therefore, lazyload can be used to load this type of resource at appropriate times. Avoid loading too many resources when the web page is opened, causing users to wait too long.
3. How to implement lazyload?
The difficulty of lazyload lies in how to load the resources required by the user at the appropriate time (here the resources required by the user refer to the resource being presented in the browser's visual area). Therefore, we need to know several information to determine whether the target has been presented in the client area, including:
1. The visual area relative to the top of the browser
2. The resource to be loaded relative to the top of the browser.
After obtaining the above two points of data, the following functions can be used to find out whether an object is in the browser's visual area.
Copy the codeThe code is as follows:
//Return to the viewable area location of the browser
function getClient(){
var l,t,w,h;
l = || ;
t = || ;
w = ;
h = ;
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 = ;
h = ;
while(){
l += ;
t += ;
p = ;
}
return {'left':l,'top':t,'width':w,'height':h } ;
}
Where 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 two rectangles as above intersect.
Copy the codeThe code is as follows:
//Judge whether two rectangles intersect and return a boolean value
function intens(rec1,rec2){
var lc1,lc2,tc1,tc2,w1,h1;
lc1 = + / 2;
lc2 = + / 2;
tc1 = + / 2 ;
tc2 = + / 2 ;
w1 = ( + ) / 2 ;
h1 = ( + ) / 2;
return (lc1 - lc2) < w1 && (tc1 - tc2) < h1 ;
}
Now we can basically implement delayed loading. Next, we write some code in the event to monitor whether the target area is presented in the client area.
Copy the codeThe code is as follows:
<div style = "width:100px; height:3000px"></div>
<div id = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
</div>
var d1 = ("d1");
= function(){
var prec1 = getClient();
var prec2 = getSubClient(d1);
if(intens(prec1,prec2)){
alert("true")
}
}
We just need to load the resources we need in the popup window.
It is worth noting here that when the target object is presented in the customer area, it will pop up the window as it scrolls. Therefore, we need to cancel the monitoring of the area after the first window pops up, and use an array to collect the objects that need to be monitored. Also note: because the onscroll event and onresize event will change the viewing area information of the browser, after this type of event is triggered, it is necessary to recalculate whether the target object is in the viewing area. This is implemented using the autocheck() function. (The lazyload on the homepage of Thunder does not recalculate whether the target object is in the viewing area of the browser in the onresize event. Therefore, if the browser window is reduced to a certain size first, then scroll to the area where the picture needs to be loaded and then click to maximize, the picture cannot be loaded, haha, you need to pay attention in the future).
Add element:<div id = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">
Copy the codeThe code is as follows:
//Compare whether a sub-region is presented in the browser area
function jiance(arr,prec1,callback){
var prec2;
for(var i = - 1 ; i >= 0 ;i--){
if(arr[i]){
prec2 = getSubClient(arr[i]);
if(intens(prec1,prec2)){
callback(arr[i]);
//After loading the resource, delete the monitoring
delete arr[i];
}
}
}
}
//Detection whether the target object appears in the client area
function autocheck(){
var prec1 = getClient();
jiance(arr,prec1,function(obj){
//Loading resources...
alert()
})
}
//Subregion 1
var d1 = ("d1");
//Subregion 2
var d2 = ("d2");
//The area collection needs to be loaded as needed
var arr = [d1,d2];
= function(){
//Recalculate
autocheck();
}
= function(){
//Recalculate
autocheck();
}
Now we only need to load the resources we need in the pop-up window. The source code will not be posted. If you need friends or have questions, you can contact me.