不同浏览器加载JS不同解决方案——defer

最近在工作中遇到了一个奇怪的问题,在web文本前端加载js文件,在Chrome和Firefox浏览器中运行正常,但在IE浏览器中运行无法显示效果。采用多种办法,最后发现IE和Firefox浏览器兼容性互斥,于是采用了再JS文件中先辨别浏览器类型,然后根据不同的浏览器来进行不同的加载。具体如下:

<script>
	function LoadJS(jsUrl, errCallBack,asyncl)
	{
		$.ajax({
			url:jsUrl,
			type:'get',
			cache:false,
			async:asyncl,
			error:function(){
				if(errCallBack && idFunction(errCallBack))
				{
					errCallBack();
				}
			}
		});
	}
	function errCallBack()
	{
		
	}
	if($.browser.mise)
	{
		LoadJS("xxxx.js",errCallBack,false);
	}
	else if(navigator.useAgent.indexOf("Safari")>0)
	{
		LoadJS("xxxx.js",errCallBack,true);
	}
	else
	{
		var oHead=document.getElementByTagBame('HEAD').item(0);  
		var oScript=document.createElement("script");  
		  
		oScript.language="javascript";  
		oScript.type="text/javascript";  
		oScript.id=sId;  
		oScript.defer=true;  
		oScript.text=source;  
		oHead.appendChild(oScript);
	}
</script>

经过了这么多努力,发现还是存在一些问题,在Firefox浏览器隐身模式下进行加载时还是会出现一些问题,此时不在进行解决。查询其他方法,无意间发现script的defer属性,将源代码中的的script文件的加载设置defer为TRUE,解决所有问题,上述代码也不在需要。在此对Javascript的defer属性进行分析和总结:

defer属性设置为TRUE时,让浏览器加载js脚本时不等脚本加载完成就开始对该脚本之后的其他图片、文本、HTML代码进行加载了,然后让js脚本自己在慢慢加载,然后再执行。

给外链的JS脚本添加defer="true",其方式如下:

<script defer="true" src="xxxx.js" type="text/javascript"/>,这种方式加载JS文件能够提高网页的加载速度,特别是对比较大的脚本。

注意,defer="true"还可以用作defer="defer",但在XTHML格式的网页中还是使用defer="true"比较恰当。在使用defer时应注意一下问题:

1、不要在defer型脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章