Page delayed loading is generally like some advertisements, images, statistics code, and so on. I hope they will not affect the opening and normal browsing of the website. I usually use delayed loading, let's take a look at a simple method of loading external js with latency.
In our actual business, the code of many third-party resources, such as advertisement code, is generally not on the first screen, so the general functions can be extended and loaded.
Example operation:
These ad spaces occupy 26 links, and 80% of users will not roll down.
Pre-processing code
| The Code is as follows: |
Copy code |
<Script type = "text/javascript" id = "zp_script_33" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 33 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </SCRIPT>
<Script type = "text/javascript" id = "zp_script_34" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 34 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </SCRIPT>
<Script type = "text/javascript" id = "zp_script_35" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 35 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </SCRIPT>
<Script type = "text/javascript" id = "zp_script_36" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 36 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </SCRIPT> |
Code after processing
Use the features of textarea to directly load external resources on pages
| The Code is as follows: |
Copy code |
<TEXTAREA class = gs_async> <script type = "text/javascript" id = "zp_script_33" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 33 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </script> </TEXTAREA>
<TEXTAREA class = gs_async> <script type = "text/javascript" id = "zp_script_34" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 34 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </script> </TEXTAREA>
<TEXTAREA class = gs_async> <script type = "text/javascript" id = "zp_script_35" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 35 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </script> </TEXTAREA>
<TEXTAREA class = gs_async> <script type = "text/javascript" id = "zp_script_36" src = "http://mcc.chinauma.net/static/scripts/p.js? Id = 36 & w = 230 & h = 60 & sl = 1 & delay = 5 "zp_type =" 1 "> </script> </TEXTAREA> Write a plug-in for processing, based on jquery |
| The Code is as follows: |
Copy code |
(Function ($ ){
/**
* Script dom node asynchronous loading
*/
$. Fn. scriptNodeAsync = function (opts ){
Opts = $. extend ({
'Color': '# fff'
, Top: 0
}, Opts );
// Parse the dom node into an array structure
Function str_dom (node ){
Node = node. replace ('<script', node = "$. trim (node. replace ('"?);> </Script> ',''));
Var attr = node. split ('');
Var k = [], v = [], I = 0;
Var re = /(.*?) = "(.*?) "/I;
Var script = document. createElement ('script ');
Script. async = true;
For (I in attr ){
Var temp = attr [I]. match (re );
Script. setAttribute (temp [1], temp [2]);
}
Return script;
}
Return this. each (function (){
Var $ this = $ (this );
Var $ frame = $ (this). parent ();
Var old_node = $. trim ($ (this). val ());
Var scriptNode = str_dom (old_node );
Var textarea = $ this [0]; // convert to a native object
Textarea. parentNode. insertBefore (scriptNode, textarea );
$ This. remove ();
});
}; // Start code
$ (Function (){
// Determine whether to display
Function setPos (){
Var _ height = document.doc umentElement. clientHeight;
Var _ scrollTop = $ (window). scrollTop ();
$ ('Textarea. gs_async '). each (function (I ){
Var _ top = $ (this). parent (). offset (). top; // the current node is hidden.
Var _ view = _ scrollTop + _ height; // The current visible height.
If (_ view> _ top ){
$ (This). scriptNodeAsync (); // start the plug-in
}
});
} Var throttled = GS. throttle (setPos, 1000); // throttle function _ from common/js/gs_base.js
$ (Window). scroll (throttled ); }); }) (JQuery ); |
Next, I will introduce to you that many websites use the settimeout Function to hide and display pages and load advertisements. This method is just like JavaScript or loading them together with the page, however, the ad code is indeed delayed loading, which is not a simple and convenient method.
