1. Background analysis:
Previously in the development of a page loading plug-in, wrote two parameters, one is Loadinto, one is delete, the first loadinto is to add the relevant page elements to the page, the second delete is to remove the added page elements, It is very difficult to implement this Delete method because our development framework is based on Liferay, an IFRAME in the main operating area of the page, and there are different domain problems.
2. Principle Analysis:
Today is also to see an article with the onload can return "Somejavascriptcode" syntax, to achieve IFRAME/IMG/BODY/SCRIPT/CSS loading complete the perfect method, which just solved the problems I have encountered before, To extend it you can use this method to define a particular element of the page to perform special code after loading, and then use this method to optimize the original plug-in.
OnLoad syntax:
Onload= "Somejavascriptcode"
| Parameters | Description |
|---|---|
| Somejavascriptcode | Necessary. Specify the JavaScript to execute when the event occurs. |
HTML tags that support this event:
<body>, <frame>, <frameset>, <iframe>, , <link> <script>
JavaScript objects that support this event:
Image, layer, window
The Attachevent method was also used:
To add a trigger event with the attachevent ()/addeventlistener () method
3. Code writing:
JS Code:
(function ($) {$.loading = {show:function () {var wrap=$ (document.body); $ ("<div class=/" loading-mask/"style= ' z-index:9998; background: #000; position:absolute; top:0px; left:0px;" ></div> "). CSS ({display:" Block ", Width:wrap.width (), Height:wrap.height (), opacity: ' 0.6 '}). Appendto (Wrap)
. Stop (). Fadeto (650, 0.8); $ ("<div class=/" loading-mask-msg/"style= ' z-index:9999; width:300px; height:200px; position:absolute; ') ><div class=/' style = ' Color: #b2b2b2; Text-align:center; Float:left; width:200px; height:60px; line-height:60px; ' ></div><div style= "/" mce_style= "/" "clear:both;/" ></div><iframe style= "Display:none" Mce_ Style= "Display:none"/></div> "). Appendto (Wrap). CSS ({display:" Block ", Left: (Wrap.width ()-$ (" Div.loading-mask-msg ", wrap). Outerwidth ())/2,top: (Wrap.height ()-$ (" div.loading-mask-msg ", wrap). Outerheight ())/2 OPacity: ' 0.6 '}. Stop (). Fadeto (650, 1);
$ ("Div.loading-mask-text"). HTML ($.LOADING.DEFAULTS.DEFAULTMSG);
}, Close:function () {var wrap=$ (document.body);
Wrap.find ("Div.loading-mask-msg"). Remove ();
Wrap.find ("Div.loading-mask"). Remove ();
}, Fadeout:function () {var wrap=$ (document.body);
Wrap.find ("Div.loading-mask-msg"). Fadeout (1000,function () {wrap.find ("div.loading-mask-msg"). Remove ();
});
Wrap.find ("Div.loading-mask"). Fadeout (1000,function () {wrap.find ("Div.loading-mask"). Remove ();
});
}
}; $.loading.defaults = {defaultmsg: "Loading, please wait ..."})
(JQuery);
$ (document). Ready (function () {$.loading.show ();});
var iframe = document.getElementById ("Iframenews");
if (iframe.attachevent) {iframe.attachevent ("onload", function () {$.loading.fadeout ();
});
else {iframe.onload = function () {$.loading.fadeout ();
}; } </script>
Html:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
This can be achieved on the optimization of my plug-in can be.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
