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

Cleey 发布于 2014/02/13 09:50
阅读 1K+
收藏 27
PHP

原文 http://www.chenglin.name/web/js-web/391.html js实现预加载

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

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

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

直接代码介绍:

1
2
3
4
5
6
7
8
9
10
11
// 预加载
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/

截个图先:
图片预加载

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部