WEB预加载--完美用户体验

浏览:2794 发布日期:2014/02/13 分类:前端开发 关键字: js预加载
原文 http://www.chenglin.name/web/js-web/391.html js实现预加载

使用JS实现网页的预加载,比如图片的呈现、web相册,预加载后别人查看图片不会重新缓冲,从而增强用户体验。达到秒杀的境界。

使用到的技术很简单,主要就是image 的 onload属性;

简单说几个步骤:1、获取图片路径 2、预加载图片

直接代码介绍:

// 预加载
function imgpreload ( ) {
var imgattr = window . location . href + 'img/' ; // 图片存在文件这个下面
$ ( ".setbg" ) . each ( function ( ) {
var info = $ ( this ) . children ( 'img' ) . attr ( 'src' ) ; // 具体的图片名称
var img = new Image ( ) ;
img . src = imgattr + info ; // 图片的完整路径
img . onload = function ( ) { } ; // 图片预加载
} ) ;
}
imgpreload ( ) ; // 执行预加载函数;

是不是很简单,如果知道图片路径,就几行搞定了,我这是使用jquery自动扫描指定位置的图片属性,获取图片信息,最后组合图片路径,进行图片的预加载,查看起来很爽吧;

给个实例看看 地址 : http://www.chenglin.name/nav/

截个图先:

图片预加载
最佳答案
评论( 相关
后面还有条评论,点击查看>>