html加载原理,html+js实现图片预加载,lightbox底层原理。

在前端设计时，为了让某县页面的图片即使缓存到浏览器中，一般使用预加载技术，但更为确切的应该称为异步加载，因为对线程不会造成阻塞。

图片是网站开发部分中的静态资源，当浏览器网络请求到图片时会首先缓存，然后根据url hash值载入到中

核心代码

function loadImage(id,src,callback)

{

var imgloader= new window.Image();

//当图片成功加载到浏览器缓存

imgloader.onload =function(evt)

{

if(typeof(imgloader.readyState)=='undefined')

{

imgloader.readyState = 'undefined';

}

//在IE8以及以下版本中需要判断readyState而不是complete

if ((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete)

{

callback({'msg':'ok','src':src,'id':id});

}else{

imgloader.onreadystatechange(evt);

}

};

//当加载出错或者图片不存在

imgloader.onerror = function(evt)

{

callback({'msg':'error','id':id});

}

//当加载状态改变

imgloader.onreadystatechange = function(e)

{

//此方法只有IE8以及一下版本会调用

}

imgloader.src=src;

}

深情的测试一下吧。

html>

异步(预加载)加载图片

 

function loadImage(id,src,callback)

{

var imgloader= new window.Image();

//当图片成功加载到浏览器缓存

imgloader.onload =function(evt)

{

if(typeof(imgloader.readyState)=='undefined')

{

imgloader.readyState = 'undefined';

}

//在IE8以及以下版本中需要判断readyState而不是complete

if ((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete)

{

//console.log('width='+imgloader.width+',height='+imageloader.height);//读取原始图片大小

callback({'msg':'ok','src':src,'id':id});

}else{

imgloader.onreadystatechange(evt);

}

};

imgloader.onerror = function(evt)

{

callback({'msg':'error','id':id});

};

imgloader.onreadystatechange = function(e)

{

//此方法只有IE8以及一下版本会调用

};

imgloader.src=src;

}

var loadResult = function(data)

{

data =   data ||{} ;

if(typeof(data.msg)!='undefined')

{

if(data.msg=='ok')

{

//这里使用了id获取元素，有点死板，建议读者自行扩展为css 选择符

document.getElementById(''+data.id).src=data.src;

}else{

//这里图片加载失败，我们可以显示其他图片，防止大红叉

document.getElementById(''+data.id).src='unload.png';

}

}

}

var surl = 'http://web.2008php.com/2014_Website_appreciate/2014-10-31/20141031133134.jpg';

loadImage('display_images',surl,loadResult);

注意：这种用法过于简单，没有发挥出性能，请读者自行改造后，预加载20张1024*780图片，然后自动播放。如果是预加载的，播放时看不见卡顿或显示不完全的现象。

--------------------------------------------------------------------------------

目前，很多主流的图片展示库如 lightbox.js,facybox.js等底层就是依据这种原理实现的，有兴趣的读者可以使用一下这些第三方框架。

try doing it.