计算机教程

浅析js预加载/延迟加载

8 9月 , 2019  

IE中使用new Image().src 去预加载文件。
其他浏览器使用动态插入document.createElement(‘object’)标签来完成加载。

javascript图片预加载与延时加载的不同

预加载:就是页面打开,图片什么的都加载好了(优先显示图片)
延迟加载:优先显示别的,等别的显示完了,再加载图片(优先显示其他东西)

各有所需,看你的用户需要优先看什么。
 

  1. new Image().src
    之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。
    同时safari和chrome看起来也没有被缓存。
  2. 动态插入object 标签需要插入到非head部分,以触发加载。
  3. ie7 ie8 也可以通过一些代码使用动态object加载文件。

浅析js预加载/延迟加载,浅析js延迟加载

Pre loader
预加载一般有两种常用方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会
在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css
的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制

Lazy
loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多
图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。

在腾讯的QQ空间和微博中就采用这样技术实现,在大访问量的网站,这样就相对可以减少服务器的压力,在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来,在下载过程中存在着用户等待内容呈现。

IE中使用new Image().src 去预加载文件。
其他浏览器使用动态插入document.createElement(‘object’)标签来完成加载。

说明:

  1. new Image().src
    之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。
    同时safari和chrome看起来也没有被缓存。
  2. 动态插入object 标签需要插入到非head部分,以触发加载。
  3. ie7 ie8 也可以通过一些代码使用动态object加载文件。

您可能感兴趣的文章:

javascript或jquery怎实现延迟加载js文件

// 请看jquery的getScript// 想加载js的时候$.getScript(‘url’, callback);//
如果指定多少时间之后加载jssetTimeout(function() { $.getScript(‘url’,
callback);}, 1000);
 

http://www.bkjia.com/Javascript/884423.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/884423.htmlTechArticle浅析js预加载/延迟加载,浅析js延迟加载 Pre loader
预加载一般有两种常用方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为…

说明:


相关文章

发表评论

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

网站地图xml地图