In applications, external js usually affects the website's opening speed and experience. In some JavaScript files, we can delay loading, next I will introduce the external js loading instance test of webpage delayed loading. I hope to help you.
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 = "external js address/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 = "external js address/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 = "external js address/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 = "external js address/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 = "external js address/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 = "external js address/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 = "external js address/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 = "external js address/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 ); |
