风一样的回忆

新浪微薄腾讯微薄

最新碎语:最近开始学习俄语!!!

您的位置:风一样的回忆 >jQuery> jQuery图片延时加载示例二-\(^o^)/~

jQuery图片延时加载示例二-\(^o^)/~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="霏凡的个人博客" />
<meta name="description" content="blog.whobt.com," />
<title>霏凡的个人博客</title>
<script src="http://www.zzjs.net/img/
jquery_zzjs.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
 $(function(){
  var $winH = $(window).height();
  var $img = $("#show_zzjs_net img");
  var $imgH = parseInt($img.height()/2);
  var $srcDef = "http://www.zzjs.net/img/1018_20110128wwwzzjsnet.gif";
  runing();
  $(window).scroll(function(){
   runing();
  })
  function runing(){
   $img.each(function(i){
    var $src = $img.eq(i).attr("original");
    var $scroTop = $img.eq(i).offset();
    if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
    {
     if($img.eq(i).attr("src") == $srcDef){
      $img.eq(i).hide();
     }
     $img.eq(i).attr("src",function(){return $src}).fadeIn(300);
    }
   })
  }
 })//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
<style type="text/css">
 *{ border:0;}
 a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}
</style>
</head>
<body>

需要加载js文件,请刷新页面后看效果!
 <div id="show_zzjs_net">
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
4_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
4_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
5_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
5_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
4_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
5_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
2_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
5_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
1_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
3_20110128www_zzjs_net.jpg" /></a>
        <a href="http://www.zzjs.net"><img src="http://www.zzjs.net/img/
1018_20110128wwwzzjsnet.gif" width="160" height="160" original="http://www.zzjs.net/img/
5_20110128www_zzjs_net.jpg" /></a>
    </div>
</body>
</html>

---

转载请注明本文标题和链接:《jQuery图片延时加载示例二-\(^o^)/~

分享到:
以下为全部代码:
Plugins by ewCEO.com

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交