1.背景分析：
以前在開發一個頁面loading外掛程式的時候,寫了兩個參數，一個是loadInto,一個是delete，第一個loadInto是往頁面裡邊添加相關的頁面元素，第二個delete是刪除掉添加的頁面元素，就是使用在頁面載入或者是grid載入完成之後，但是由於我們的開發架構是基於lifeRay，在頁面主操作區一個iframe,並且存在不同域的問題，所以很難執行這個delete的方法。
2.原理分析：
今天也是看到一篇用onload可以返回“SomeJavaScriptCode”的文法，實現iframe/img/body/script/css載入完成的完美方法，這正好解決了我以前遇到的問題，延伸一下可以使用這個方法定義頁面某個特定元素載入完後執行特殊的代碼，於是使用這個方法對原來的外掛程式進行最佳化。
onload文法：
onload="SomeJavaScriptCode"
| 參數 | 描述 |
|---|---|
| SomeJavaScriptCode | 必需。規定該事件發生時執行的 JavaScript。 |
支援該事件的 HTML 標籤：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支援該事件的 JavaScript 對象：
image, layer, window
還用到了attachEvent方法：
用attachEvent()/addEventListener()方法添加觸發事件
3.代碼編寫：
js代碼：
(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;'><img style='float:left; width:60px;' src="loading.gif" mce_src="loading.gif" alt='loading...' /><div class=/"loading-mask-text/" 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 : "正在載入，請稍候……"}})(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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>loading效果</title> <mce:script src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" language="javascript"></mce:script> </head> <body> <iframe id="iframenews" src="http://www.qq.com" mce_src="http://www.qq.com" name="bionews" width="800" marginwidth="0" height="700" marginheight="0" align="top" scrolling="no" frameborder="0"></iframe> </body> </html>
這樣可以實現對我外掛程式的最佳化了就可以。
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
