Web前端之家,javascript预加载图片

今天在优化网站交易区的页面的时候发现在IE6下面加载好慢,找了半天多没找到原因,后来发现有一张图被加载了很多次,后来在taobao
UED找到了解决方法。

JS获取当前脚本文件的绝对路径,js获取当前绝对路径

 当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这个问题吧!

一、各大浏览器的实现方式                

 [a]. Chrome和FF

 超简单的一句足矣!

var getCurrAbsPath = function(){
 return document.currentScript.src;
};

这里利用了对象 document.currentScript
,它返回的是当前执行的script元素;然后调用script元素的src属性即可获取脚本文件的绝对路径。

  [b]. IE10+、Safari和Opera9

北京赛车app软件下载, 利用Error对象的stack属性(IE10+)、sourceURL属性(Safari)和stacktrace属性(Opera9)萃取绝对路径

var getCurrAbsPath = function(){
  var a = {}, stack;
  try{
   a.b();
  }
  catch(e){
   stack = e.stack || e.sourceURL || e.stacktrace; 
  }
  var rExtractUri = /(?:http|https|file)://.*?/.+?.js/, 
    absPath = rExtractUri.exec(stack);
  return absPath[0] || '';
}; 

  [C]. IE5.5~9

 遍历文档中的script标签

var getCurrAbsPath = function(){
  var scripts = document.scripts;
  var isLt8 = ('' + document.querySelector).indexOf('[native code]') === -1;
  for (var i = scripts.length - 1, script; script = scripts[i--];){
    if (script.readyState === 'interative'){
     return isLt8 ? script.getAttribute('src', 4) : script.src;  
    }
  }
};

二、相关知识介绍                      

IE5.5~9下script的readyState表示该script元素的状态,分别有以下的状态值:

uninitialized:未初始化

loading:正在加载

loaded:加载完成

interative:执行中

complete:执行完

可通过订阅onreadystatechange事件来监听script元素状态的变化。但不幸的是loaded和complete状态并出现顺序不定且有可能仅出现其中一个,因此建议在动态添加script元素时,先设置src属性后再将script元素添加到DOM树中,这样loaded和complete状态仅会出现其中一个(虽然每次请求时,哪个出现是不定的),比较好监测。

 三、IE和FF下的另一种方式                

 通过订阅 window.onerror
事件,事件处理函数将接受三个参数,分别是msg,url和num。这里url就是当前脚本的绝对路径了。

以上就是本文的全部内容,希望对大家的学习有所帮助。

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验。在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户。不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果。

BUG原因:

您可能感兴趣的文章:

  • jsp下显示中文文件名及绝对路径下的图片解决方法
  • javascript将相对路径转绝对路径示例
  • jsp文件绝对路径的设置方法
  • JS取得绝对路径的实现代码
  • Javascript中使用A标签获取当前目录的绝对路径方法

当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,…

先说需要知道的服务器返回的status code:status-code: 200 –
客户端请求成功status-code: 304 –
文件已经在浏览器缓存中,服务器告诉客户端,原来缓冲的文档还可以继续使用。本文测试判断文件被是否被缓存,用的就是判断是否返回304.

IE6在window.onload时执行脚本,会引发一些cache的问题:

下面针对预加载的几个方法,在不同的浏览器下加载img/js/css做个测试,主要包括new
Image()、object、iframe。以下加载测试的js、css、图片文件,是从几个门户网站找的(为啥找几个?是为了尽可能滴测试到特殊的情况,测试中还真遇到了)。1、测试用new
Image加载复制代码 代码如下: new
Image().src =
”;
//淘宝 new Image().src =
”; //拍拍
new Image().src =
”; //有啊 new
Image().src =
”;
//新浪*/然后再把图片添加到页面内:北京赛车app软件下载 1

1、此时JS对dom进行渲染级的变动,如设置宽高、innerHTML等,会对元素的背景图进行重新请求

加载图片没啥好说的,IE6-9/CM/FF/OP/都返回304,预加载成功。1.2、测试用new
Image()加载css复制代码 代码如下: new
Image().src = ”;
//淘宝.src = ”;
//拍拍.src = ”;
//有啊.src = ”;
//新浪 // //
可以用这个测试IE下Expires设置的时间小于当前时间的情况再把css添加到页面内

2、此时JS对多个Image元素设置同一src,此src会被请求多次

这个有区别了:CM/OP,都返回304。FF,
全部返回了200。IE,1/2/4都返回304,而3返回200。对比返回的HTTP-Header可以发现:1/2/4都设置了Expires过期时间,而3没有设置。说明IE下缓存需要设置Expires,而FF不支持利用new
Image()预加载。1.3、测试用new Image()加载js复制代码 代码如下: new Image().src =
”; //淘宝.src =
”; //拍拍.src =
”; //有啊.src =
”; //新浪.src =
”;
//QQ再把js添加到页面内。

解决方法:

CM/OP,都返回304FF,只有5返回了304,也只有5的HTTP-Header最简单(包括:Date、Server、Expires、Cache-Control)。另外几个的响应头信息内容都比较多,但也都设置了5里面的这几个。找规律,发现另外几个的响应头都有:Content-Type:text/javascript,而5里面没这个。IE,2/5返回了304,1/3/4返回200,对比响应头,应该还是Content-Type影响的,IE里面2/5都没看到Content-Type。另外,感谢AndrewZhang(
image
预加载js在httpwatch下查看content,资源的加载并不是完整的。我这里测试也是如此。貌似有字节限制,测试中2返回的是完整的,5有一部分内容丢失了。所以用new
Image加载JS一点都不可取。

在页头CSS加入如下代码:

这里总结下:预加载图片用new
Image()兼容性没问题。但是css/js只有OP/CM可以,IE/FF基本是无效。2、测试用object预加载

html {zoom:expression

var doc = document, obj = doc.createElement; //obj.data = ‘123.js’;
//Ps: 这样写OP下无效(会把data的内容作为object标签里的text node)
//obj.setAttribute; // img、css、js obj.style.cssText =
‘position:absolute;top:-1px;width:1px;height:1px;’; // obj.style.width =
obj.style.height = 0; doc.body.appendChild; // 插入object
标签需要插入到非head部分,以触发加载*/ //obj.onload = function }; //
FF/OP/Webkit支持

{ele.style.zoom = "1";

然后再吧object里面data加载的文件,创建标签加到HTML内测试。

document.execCommand("BackgroundImageCache", false, true);};}

测试结果:FF/OP/CM:
无论是img/js/css,都返回304。IE6-8:用object加载img/js/css,会直接Aborted。IE9比较特殊:IE9加载js/css,先请求并返回HTTP200,再请求并Aborted,这里实际上是请求1次。IE9加载img的情况,先请求并返回HTTP200,再请求返回图片,所以图片需要请求2次。

如果你不想用这个方法的话,你可以不在window.onloaddomready时进行类似操作

IE9的第1次请求返回的内容是空的(并且此时浏览器一般会卡住,或者直接失去响应)。
IE9首先会请求url,获取文件类型,判断是JS/CSS就Aborted,判断是图片才加载。

至于IE9第1次请求,大概是靠读取HTTP头信息来得到文件类型,或者偷偷把文件下载下来,然后在沙盒里面测试文件类型。一个有意思的事情,比如用object加载JS,IE9有时也能加载进来,也就是第1个请求没判断出文件是JS(想看到这个要看运气了,貌似网速慢的时候可能发生)

据说以前IE是靠文件后缀来判断文件类型的,后期用HTTP头信息来判断,而他们都可以伪造,所以object在IE下存在安全问题。IE6/7,如果文件后缀后缀为.js/.css不会发出请求,如果改成

So,这里的结论是:FF/OP/CM下可以用object预加载,IE就千万别用了。3、测试用iframe预加载

先创建页面a.html,然后加上下面的js。复制代码 代码如下: var doc = document, ifm =
doc.createElement; //ifm.; // ifm.style.border = ifm.width = ifm.height
= 0; ifm.style.cssText =
‘position:absolute;top:-10px;border:0;width:1px;height:1px;’;
ifm.scrolling = “no”; doc.body.appendChild; window.onload = function(){
// 预加载当然最好是window.onload之后触发
//要触发onload,需要先appendChild,然后再写onload // ifm.onload =
function(){ alert; } //
contentWindow.document-所有都支持,contentDocument-IE9/FF/OP/CM支持 var
ifmDoc = ifm.contentDocument || ifm.contentWindow.document;
ifmDoc.open(); ifmDoc.write(‘

‘); //ifmDoc.write(‘

‘); // 用于测试 //ifmDoc.write’); // 用于测试 //ifmDoc.write(”);//
用于测试 // 开始加载 ifmDoc.write(”); ifmDoc.write(‘

北京赛车app软件下载 2

发表评论

电子邮件地址不会被公开。 必填项已用*标注