有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。
推荐: 使用jquery图片延迟加载插件jquery.lazyload实现图片延迟
实现原理 :
把所有需要延时加载的图片改成如下的格式:
<img lazy_src="图片路径" border="0"/>
然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片):
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释:
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
lazyLoad = ( function () { |
doc_body = document.body; |
doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement; |
lazy_load_tag = tags || [ "img" , "iframe" ]; |
function initElementMap() { |
len = lazy_load_tag.length; i < len; i++) { |
var el = document.getElementsByTagName(lazy_load_tag[i]); |
len2 = el.length; j < len2; j++) { |
if ( typeof (el[j]) == "object" && el[j].getAttribute( "lazy_src" )) { |
element_obj.push(all_element[key]); |
len = element_obj.length; i < len; i++) { |
var o_img = element_obj[i]; |
var t_index = getAbsoluteTop(o_img); |
if (map_element[t_index]) { |
map_element[t_index].push(i); |
map_element[t_index] = t_array; |
function initDownloadListen() { |
if (!download_count) return ; |
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop; |
var visio_offset = offset + doc_element.clientHeight; |
if (last_offset == visio_offset) { |
setTimeout(initDownloadListen, 200); |
last_offset = visio_offset; |
var visio_height = doc_element.clientHeight; |
var img_show_height = visio_height + offset; |
for ( var key in map_element) { |
if (img_show_height > key) { |
var t_o = map_element[key]; |
for ( var l = 0; l < img_vl; l++) { |
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute( "lazy_src" ); |
setTimeout(initDownloadListen, 200); |
function getAbsoluteTop(element) { |
if (arguments.length != 1 || element == null ) { |
var offsetTop = element.offsetTop; |
while (element = element.offsetParent) { |
offsetTop += element.offsetTop; |
使用方法: 把页面上需要延时加载的图片src改成为lazy_src,然后把上面的js放到body最后面,然后调用:lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外:
如果你的页面上存在有内容切换的栏目的话,可能在切换时切换的内容里的图片可能会不显示,处理的方法是在内容时单独图片加载处理,如:
///切换内容的代码…
chlid.find( "img[init_src]" ).each( function (){ |
$( this ).attr( "src" ,$( this ).attr( "init_src" )); |
$( this ).removeAttr( "init_src" ); |
});