cleey
望着那一丝海线,若隐若现。落日下的海霞,数不尽的美,看不完的醉
WEB网页预加载
使用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.cleey.com/nav/
截个图先:
[caption id="attachment_392" align="alignnone" width="1265"]图片预加载 图片预加载[/caption]

别忘了查看,这个实例下面 右下角 是网页背景使用了预加载技术;设置背景能够感觉到极速体验,爽~~
地址 : http://www.cleey.com/nav/
<< 上一篇 JS在web客户端保存cookie信息 如何做权限控制? 下一篇 >>
文章标签
随意 | Created At 2014 By William Clinton | Contact Me: 1619488373@qq.com | 蜀ICP备14002619号 |