澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站异步加载技术及性能分析

加载并全屏轮播加载的其他网址的页面

jquery有八个load(卡塔尔方法,使用方式如:$("#div"卡塔尔(قطر‎.load("/index.html"卡塔尔国;那样就足以将index.html加载到ID为div的器皿中,
用iframe也足以兑现,但平昔不上述做法完美,参见discuz那多少个网址,如登入弹出三个层,也是载入的三个页面,但本身意识事态栏右边现身的是 正在张开about:blank,不知情是还是不是将iframe的src设为about:blank,然后在编写iframe呢?但注意了,查看源代码的时候却看不到载入页面包车型大巴时候是看不到载入的这一个页面的源代码,不知晓是或不是才用了跟jquery同样解析head,然后将载入页面包车型的士头顶音信增多到主页面包车型客车尾部,然后用eval(卡塔尔国函数施行javascript代码,,求解?
以下作者用了三个页面做为承载载入页面源代码的器皿,命名叫do.html,传递贰个参数uri告诉do.html要载入的页面!
示例DEMO: 直接点登录既可
该页面加载了多少个js文件

javascript得以达成iframe框架延时加载的点子,javascriptiframe

正文实例叙述了javascript完结iframe框架延时加载的章程。分享给我们供咱们参考。具体落实际景况势如下:

蓬蓬勃勃部分时候我们希望页面包车型地铁意气风发部分东西达成延时加载,那样能够不影响网站张开速度,下边作者来给大家介绍javascript达成iframe框架延时加载方法呢。

亟待加载区域HTML代码:

复制代码 代码如下:

<div id="indexlogin"></div>

上边代码放在尾部

复制代码 代码如下:

<span id="tmpjsnews"><script type="text/javascript" src="你调用的js" language="javascript"></script></span>
<script type="text/javascript">document.getElementById("indexlogin").innerHTML=document.getElementById("tmpjsnews").innerHTML;</script>

代码二

复制代码 代码如下:

window.onload   =   function()      {        
 frames["BiframeName"].location.href   =   "B.htm";    
}

利用setTimeout

复制代码 代码如下:

setTimeout(function(){
    var frame = document.createElement('IFAME');
frame.src = ' ';
    document.getElementById('container').appendChild(frame);
}, 60000);

目的在于本文所述对大家基于javascript的web程序设计有着帮忙。

延期加载javascript,也等于页面加载成功今后再加载javascript,也叫on demand(按需)加载,常常常有眨眼间间多少个艺术:

那是风华正茂篇原创翻译文章。原作地址。

意气风发、  设计思路

1、使用iframe标签加载别的网址页面

2、通过js替换iframe的加载链接

3、通过js的停车计时器实现轮播

4、通过js完结全屏

复制代码 代码如下:

Javascript怎延时加载iframe

window.onload=function(卡塔尔{//页面加载后执行的函数 setTimeout(function(卡塔尔(قطر‎{ var newE = document.createElement("iframe"卡塔尔;//创建iframe成分newE.src="1.jpg";//设置新成分src属性值 var crea = document.body.appendChild(newE卡塔尔(قطر‎;//为body增多子元素},60000卡塔尔(英语:State of Qatar);//60000微秒后推行}  

  1. DOM

小编们会日常利用iframes来加载第三方的剧情、广告依旧插件。使用iframe是因为他得以和主页面并行加载,不会堵塞主页面。当然使用iframe也可以有利有弊的:SteveSouders在她的blog里面有演说:Using Iframes Sparingly:

二、代码小解

1、加载页面

        <iframe src="" width='100%' height='100%' frameborder='0' name="_blank" id="_blank"></iframe>

落到实处iframe的自适应展现。

2、通过jQuery完毕转移链接

$('iframe').attr("src", " ")

3、设置计时器

setTimeout是到设定的时刻后只进行一遍,setInterval是每间隔到设定的时日就能够奉行。

首先先使用setTimeout实行第2回的页面更替加载,再使用setInterval和setTimeout相结合贯彻浓厚的轮播。

<script type="text/javascript" src="/image/script.ashx/global.js?ver=1.0.0"></script>
<script type="text/javascript" src="/image/script.ashx/plus.js?ver=1.0.0"></script>

Chrome遇到下JavaScript怎等待iframe加载完结

$(selector).load();
网页里面包车型地铁数额有哪些好提取的  

本文实例陈说了javascript完成iframe框架延时加载的章程。共享给我们供我们参谋。具体实...

head append script tag

  • iframe会拥塞主页面包车型大巴onload事件
  • 主页面和iframe共享同叁个连接池

三、  项目代码

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/jquery-3.3.1.min.js"></script>
<style>
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }
</style>
<body>
<div>
    <button id="btn">全屏展示</button>

    <div id="content">
        <iframe src="https://www.taobao.com" width='100%' height='100%' frameborder='0' name="_blank"
                id="_blank"></iframe>
    </div>
</div>
</body>
//全屏代码
<script language="JavaScript">

    document.getElementById("btn").onclick = function () {
        var elem = document.getElementById("_blank");
        var h1 = document.getElementById("h1");
        requestFullScreen(elem);// 某个页面元素
        //requestFullScreen(document.documentElement);// 整个网页
    };

    function requestFullScreen(element) {
        // 判断各种浏览器,找到正确的方法
        var requestMethod = element.requestFullScreen || //W3C
            element.webkitRequestFullScreen ||    //Chrome等
            element.mozRequestFullScreen || //FireFox
            element.msRequestFullScreen; //IE11

        if (requestMethod) {
            requestMethod.call(element);
        }
        else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

    //退出全屏 判断浏览器种类
    function exitFull() {
        // 判断各种浏览器,找到正确的方法
        var exitMethod = document.exitFullscreen || //W3C
            document.mozCancelFullScreen ||    //Chrome等
            document.webkitExitFullscreen || //FireFox
            document.webkitExitFullscreen; //IE11
        if (exitMethod) {
            exitMethod.call(document);
        }
        else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

</script>
<script>
        $(document).ready(function () {
                setTimeout(function f() {
                    $('iframe').attr("src", "https://www.baidu.com")
                }, 30000);
                setTimeout(function ff() {
                    $('iframe').attr("src", " https://www.taobao.com ")
                }, 60000);
}
            setInterval(function ffff() {
                setTimeout(function f() {
                    $('iframe').attr("src", " https://www.baidu.com ")
                }, 30000);
                setTimeout(function ff() {
                    $('iframe').attr("src", " https://www.taobao.com ")

                }, 60000);
                   }, 90000);}
</script>
</html>

 

do.html的源代码为:

window.onload = function() {

闭塞主页面包车型客车onload是那三个难题中最影响属性的地点。日常都以想让onload时间越早触发越好,一方面是顾客体验过更关键的是google给网址的加载速度的打分:客户能够用IE和FF中Google工具栏来计时。

复制代码 代码如下:

setTimeout(function(){

那么为了加强页面质量,怎么样本事不窒碍主页面包车型客车onload事件的来加载iframe呢?

<html>
<head>
<title>载入中...</title>
<script type="text/javascript" src="/image/script.ashx/do.js?ver=1.0"></script>
</head>
<body>
</body>
</html>

// reference to

那篇讲了多种加载iframe的章程:普通iframe,onload之后加载iframe,setTimeout(卡塔尔国iframe和异步加载iframe。每个格局的加载结果笔者都用IE8的年月线来突显。作者提出多在意下动态异步加载这么些点子,因为这是性质表现最好的。此外,还大概有一种自己iframe(friendly iframe卡塔尔(英语:State of Qatar)手艺。他恐怕算不得是iframe加载的本领,可是必需使用iframe,他是无堵塞加载的。
普通方法加载iframe 这是意气风发种人尽皆知的家常加载方法,它从未浏览器的宽容性难点。
<iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto"> </iframe>
应用这种加载方法会在各浏览器中犹如下表现:

File:do.js

var head = document.getElementsByTagName('head')[0];

iframe会在主页面包车型地铁onload从前加载
iframe会在享有iframe的内容都加载达成之后触发iframe的onload
主页面包车型地铁onload会在iframes的onload触发之后触发,所以iframe会梗塞主页面包车型大巴加载
当iframe在加载的长河中,浏览器的会标志正在加载东西,处于辛勤景观。
此间是三个示范页面,时间线图彰显出iframe会拥塞主页面包车型大巴加载。

复制代码 代码如下:

// a new CSS

澳门新浦京娱乐场网站 1

document.write("<script src="/image/script.ashx/global.js?ver=1.0.0"></script>");
document.write("<script src="/image/script.ashx/plus.js?ver=1.0.0"></script>");
window.onload=function(){
j.plus.loadPage({uri:"/",time:1},{
澳门新浦京娱乐场网站,start:function(){/*起来加载的回执函数*/},
over:function(){/*加载成功的回执函数*/}});
}

var css = document.createElement('link');

自个儿的建议:注意onload拥塞。假如iframe的内容只须求异常的短的小时来加载和实施,那么亦非个大难题,而且动用这种艺术还应该有个好处是能够和主页面并行加载。可是借使加载这几个iframe须求相当长日子,客户体验就非常差了。你得投机测验一下然后在

loadPage的定义如下:

css.type = "text/css";

在onload现在加载iframe
即使你想在iframe中加载一些剧情,然而这几个剧情对于页面来讲不是那么的要害。或然这个剧情无需马上表现给客户的,要求点击触发之类的。那么能够伪造在主页面载入之后加载iframe。

复制代码 代码如下:

css.rel = "stylesheet";

复制代码 代码如下:

if(!typeof(window.j))window.j=new js();
j.plus=new plus();
function plus(){}
plus.prototype.loadPage=function(r,callback,e,times){
/*
r 央浼; r.time : 等待加载时间(阿秒卡塔尔;
callback :回执函数 (callback.start(卡塔尔,callback.over(卡塔尔(英语:State of Qatar)卡塔尔(英语:State of Qatar)
e.element 页面容器; */
if(!r.uri)alert('page uri parameters not be found!');
var aj=new ajax();
aj.request(r,{
start:function(){if(callback.start)callback.start();if(e)e.innerHTML='加载中..';else{document.body.innerHTML='加载中';}},
error:function(x卡塔尔{if(e卡塔尔e.innerHTML='加载战败!';else document.body.innerHTML='加载失利';},
success:function(x){
var func=function(){if(callback.over)callback.over();if(e)e.innerHTML=x;else document.write(x);};
if(r.time){var t=new timer(r.time,func);t.start();}/*延迟显得*/
else func();
}});
}
/*aj为ajax乞请对象在global.js中定义
* timer为兑现叁个反应计时器的代码,在plus.js中有定义 */

css.href = "new.css";

<script>
//doesn't block the load event
function createIframe() {
var i = document.createElement("iframe");
i.src = "path/to/file";
i.scrolling = "auto";
i.frameborder = "0";
i.width = "200px";
i.height = "100px";
document.getElementById("div-that-holds-the-iframe").appendChild(i);
};
// Check for browser support of event handling capability
if (window.addEventListener) window.addEventListener("load", createIframe, false);
else if (window.attachEvent) window.attachEvent("onload", createIframe);
else window.onload = createIframe;
</script>

函数已经定义达成,我们在急需加载的地点加多代码:
File:/management.aspx/

// a new JS

这种加载方法也是不曾浏览器的宽容性难点的:

复制代码 代码如下:

var js = document.createElement("script");

iframe会在主页面onload之后在这里之前加载
主页面包车型客车onload事件触发与iframe非亲非故,所以iframe不会卡住加载
当iframe加载的时候,浏览器会标记正在加载
那是是贰个测量检验页面,时间线图如下

var bd=j.$("mainbody"); // mainbody为一个div容器
var uri="/do.html?uri=/management.aspx/" uri;
bd.innerHTML="<iframe src='" uri "' frameborder='0' width='" (j.x()-200) "' height='100%' scrolling='no'></iframe>";

js.type = "text/javascript";

澳门新浦京娱乐场网站 2
这种方式比日常方法有何样平价呢?load事件会立刻触发,有八个好处:
其它等待主页面onload事件的代码能够神速实践
Google Toolbar总计你页面加载的大运会大大减弱
而是,当iframe加载的时候,如故拜谒到浏览器的无暇景色,相对于日常加载方法,客商见到繁重景观的光阴越来越长。还大概有纵然顾客尚未等到页面完全加载完的时候就已经偏离了。有个别情形下那是个难点,比如广告。

由于do.html会被缓存,所以在do.js中用ajax将回来的html输出到do.html
在线演示地址

js.src = "new.js";

setTimeout()来加载iframe
这种办法的目标是不堵塞onload事件。
SteveSouders(又是他?卡塔尔国有三个这种方式的测量检验页面(

, 用iframe也足以完结,但未曾上述做法完美...

// preload JS and CSS

复制代码 代码如下:

head.appendChild(css);

<iframe id="iframe1" src="" width="200" height="100" border="2">
</iframe>
<script>
function setIframeSrc() {
var s = "path/to/file";
var iframe1 = document.getElementById('iframe1');
if ( - 1 == navigator.userAgent.indexOf("MSIE")) {
iframe1.src = s;
} else {
iframe1.location = s;
}
}
setTimeout(setIframeSrc, 5);
</script>

head.appendChild(js);

在除了IE8以外的全体浏览器中会犹如下展现:
iframe会在主页面onload早前初阶加载
iframe的onload事件会在iframe的源委都加载完结之后触发
iframe不会窒碍主页面的onload事件(IE8除了卡塔尔国
干什么不会卡住主页面包车型大巴onload呢(IE8除了卡塔尔?因为setTimeout(卡塔尔
当iframe加载的时候,浏览器会展现费力景观
下边是时间线图

// preload image

澳门新浦京娱乐场网站 3
因为IE8的标题,这种手艺就不相符广大网址了。假使有超过常规10%的顾客采取IE8,拾壹分之后生可畏的客户体验就能够差。你会说那也只是比常常加载差一小点,其实家常便饭加载质量上也不差。onload事件对于百分之十的客户来讲都越来越长。。。。额,你自个儿思考啊。不过最佳在看了下边这一个相当赞的异步加载方法之后再决定吗。
本身在参与Velocity 2009的时候,Meebo的多少个技术员(@marcuswestin and MartinHunt卡塔尔国做了贰个有关她们的Meebo Bar的发言。他们使用iframe来加载一些插件,况且确实成功了无梗塞加载。对于部分开垦者来讲,他们的做法还比较十分。非常的赞,绝对的赞。可是一些缘由变成这种技能尚未拿走相应的关怀,作者希望那篇blog能把它使好的作风获得提升。

new Image().src = "new.png";

复制代码 代码如下:

}, 1000);

<script>
(function(d) {
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' 'var d = document;d.getElementsByTagName('head')[0].' 'appendChild(d.createElement('script')).src' '='/path/to/file'">');
doc.close(); //iframe onload event happens
})(document);
</script>

};

美妙之处就在<body onload=”">:那些iframe后生可畏带头未有内容,所以onload会马上触发。然后您创建三个script成分,用他来加载内容、广告、插件什么的,然后再把这几个script增多到HEAD中去,这样iframe内容的加载就不会拥塞主页面包车型地铁onload!你应当看看他在个浏览器中的表现:
iframe会在主页面onload早前早先加载
iframe的onload会马上触发,因为iframe的内容一领头为空
主页面的onload不会被卡住
缘何那些iframe不会拥塞主页面包车型客车onload?因为<body onload=”">
借使您不在iframe使用onload监听,那么iframe的加载就能拥塞主页面包车型大巴onload
当iframe加载的时候,浏览器终于不出示困苦景观了(相当好)
自家的测验页给出上边包车型客车时光线:

  1. document.write

澳门新浦京娱乐场网站 4

function include(script_filename) {

转义字符让代码瞧着有个别痛楚,那都小问题。试试啊。

document.write('<' 'script');

友好型iframe加载

这是用来加载广告的。即使这不是意气风发种iframe的加载才干,但是是用iframe来盛放广告的。他的亮点不在于iframe如何加载,而是主页面、iframe、广告如何同盟专门的职业的。如下:

  • 先创建三个iframe。设置他的src为七个相仿域名下的静态html文件
  • 在此个iframe里面,设置js变量inDapIF=true来告诉广告它曾经加载在此个iframe里面了
  • 在这里个iframe里面,创制叁个script元素加上海人民广播电视台告的url作为src,然后像普通广告代码相仿加载
  • 当广告加载成功,重新复苏设置iframe大小来适应广告
  • 这种措施也还未有浏览器的宽容性难点。

Ad Ops Council在推举过那么些形式,AOL也是用这种方式。想看看源码:这里有一个。一家Sverige的出版社Aftonbladet对于这种加载有非常不错的定论:在他们的主页上,加载时间压缩四成,客户每一周扩充7%,新闻有的的点击量扩大35%。我建议能够看看她们的质感:High Performance Web Sites, With Ads: Don't let third parties make you slow

自家从不开创连锁的测验页,所以也绝非第少年老成首的材质。从自家调研的结果来讲:

只要您只想在你的网页上调用四个规定的src地址的iframe的话那一个法子不是很有用。

固然你想在网页上海展览中心示多个广告,相比较灵敏的法子的是:加载三个广告,然后更新iframe加载另三个主页面包车型大巴DOMContentLoaded时间不会被打断,页面渲染也不会被打断,当然,主页面包车型地铁onload事件只怕会被封堵。

转发请注脚:
作者:BeiYuu

大家会临时使用iframes来加载第三方的从头到尾的经过、广告照旧插件。使用iframe是因为她能够和主页面并行加载...

document.write(' language="javascript"');

document.write(' type="text/javascript"');

document.write(' src="' script_filename '">');

澳门新浦京娱乐场网站异步加载技术及性能分析,JavaScript延迟加载。document.write('');

}

var which_script = '1.js';

include(which_script);

  1. Iframe

和第风度翩翩种恍若,可是script tag是放到iframe的document里面。

window.onload = function() {

setTimeout(function(){

// create new iframe

var iframe = document.createElement('iframe');

iframe.setAttribute("width", "0");

iframe.setAttribute("height", "0");

iframe.setAttribute("frameborder", "0");

iframe.setAttribute("name", "preload");

iframe.id = "preload";

iframe.src = "about:blank";

document.body.appendChild(iframe);

// gymnastics to get reference to the iframe document

iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;

var doc = iframe.document;

doc.open(); doc.writeln(""); doc.close();

// create CSS

var css = doc.createElement('link');

css.type = "text/css";

css.rel = "stylesheet";

css.href = "new.css";

// create JS

var js = doc.createElement("script");

js.type = "text/javascript";

js.src = "new.js";

// preload CSS and JS

doc.body.appendChild(css);

doc.body.appendChild(js);

// preload IMG

澳门新浦京娱乐场网站异步加载技术及性能分析,JavaScript延迟加载。new Image().src = "new.png";

}, 1000);

};

  1. Iframe static page

一直把需求加载东西放到另贰个页面中

window.onload = function() {

setTimeout(function(){

// create a new frame and point to the URL of the static

// page that has all components to preload

var iframe = document.createElement('iframe');

iframe.setAttribute("width", "0");

iframe.setAttribute("height", "0");

iframe.setAttribute("frameborder", "0");

iframe.src = "preloader.html";

document.body.appendChild(iframe);

}, 1000);

};

  1. Ajax eval

用ajax下载代码,然后用eval执行

  1. Ajax Injection

用ajax下载代码,创设三个空的script tag,设置text属性为下载的代码

  1. async 属性(缺点是无法决定加载的依次卡塔尔

感激原来的书文作者,多谢

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站异步加载技术及性能分析