高性能网站web开发之图片管理
#some-element { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop'); }
?
?
<html?xmlns="http://www.w3.org/1999/xhtml"?xmlns:v>??????????<head> ???????<style?type="text/css">????????????v\:*{behavior:url(#default#VML);}???????????</style>??????????</head>? ??????????<body>?????????????<v:image?src="image.png"?/>??????????</body>????????</html>
?
try{ document.execCommand("BackgroundImageCache", false, true);}catch(e){}
window.onload=function(){ var img = new Image(); img.src = "images/image.png"; img = null;};?
?
<a target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/"><img width="120" height="90" alt="高性能网站web开发之图片治理" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/></a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head><body> 默认看到的图片：<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/> <div id="lazyBox" style="margin-top:100px;"> 滑动滑动条才能看到的图片： <img width="120" height="90" style="border:1px solid blue;" alt="高性能网站web开发之图片治理" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> <img width="120" height="90" style="border:1px solid blue;" alt="高性能网站web开发之图片治理" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/> </div> <div style="height:1000px;"></div> <script type="text/javascript"> var hasShow = false; $(window).bind("scroll",function(){ if(hasShow==true){ $(window).unbind("scroll"); return; } var t = $(document).scrollTop(); if(t>50){ // 滚动高度超过50，加载图片 hasShow = true; $("#lazyBox .lazyImg").each(function(){ $(this).attr("src",$(this).attr("alt")); }); } }); </script> </body></html>
把上面代码copy到本地运行下就可以看到效果了。
?