源于生活

标题: 先加载所有文字,最后加载图片的一个方法 [打印本页]
作者: kevin-ying    时间: 2015-8-12 23:10
标题: 先加载所有文字,最后加载图片的一个方法
第一步,先将所有需要最后加载的图片代码进行修改:   (将src属性替换成thissrc)

例如:
<img src="/images/ad_1.jpg">

修改成: <img thissrc="/images/ad_1.jpg">

第二步:

将下面的代码放在页面最底部

[javascript]
  1. <pre name="code" class="javascript"><script language="javascript">  
  2.   
  3. imgs = document.getElementsByTagName("img");  
  4. imgsnum = imgs.length;  
  5. for(imgi = 0 ;imgi < imgsnum;imgi++){  
  6.      if ((typeof(imgs[imgi].src) == 'undefined' || imgs[imgi].src =='') && imgs[imgi].getAttribute('thissrc') != null)  
  7.         imgs[imgi].src = imgs[imgi].getAttribute('thissrc');  
  8. }  
  9.   
  10. </script></pre>  
  11. <pre></pre>  
  12. <p></p>  
  13. <pre></pre>  
  14. <p></p>  
复制代码



第二种方法:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.     <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.     <title>JS即时加载，当用到图片时才加载，只加载当前屏幕的图片 站长学院 代码特效</title>  
  5.     <meta http-equiv="content-type" content="text/html;charset=gb2312">  
  6.     <style type="text/css">  
  7.     *{border:0;}  
  8.     a{display:inline;float:left;margin:55px;background:#ccc;overflow:hidden;font-size:0;}  
  9.     </style>  
  10.     <script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>  
  11.     <script type="text/javascript">  
  12.     $(function(){  
  13.     var $winH = $(window).height();//获取窗口高度  
  14.     var $img = $("#show img");  
  15.     var $imgH = parseInt($img.height()/2);//图片到一半的时候显示  
  16.     var $srcDef = "a.gif";  
  17.     runing();//页面刚载入时判断要显示的图片  
  18.     $(window).scroll(function(){  
  19.     runing();//滚动刷新  
  20.     })  
  21.     function runing(){  
  22.     $img.each(function(i){//遍历img  
  23.     var $src = $img.eq(i).attr("original");//获取当前img URL地址  
  24.     var $scroTop = $img.eq(i).offset();//获取图片位置  
  25.     if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH){//判断窗口至上往下的位置  
  26.     if($img.eq(i).attr("src") == $srcDef){  
  27.     $img.eq(i).hide();  
  28.     }  
  29.     $img.eq(i).attr("src",function(){return $src}).fadeIn(300);//元素属性交换  
  30.     }  
  31.     })  
  32.     }  
  33.     })  
  34.     </script>  
  35.     </head>  
  36.     <body>  
  37.     预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。<br>  
  38.     <div id="show">  
  39.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  40.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  41.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  42.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  43.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  44.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  45.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  46.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  47.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  48.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  49.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  50.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  51.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  52.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s4.jpg"></a>  
  53.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  54.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  55.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  56.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  57.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  58.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  59.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  60.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  61.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  62.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  63.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s4.jpg"></a>  
  64.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  65.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  66.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  67.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  68.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  69.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  70.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  71.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  72.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  73.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  74.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  75.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s5.jpg"></a>  
  76.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>  
  77.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s5.jpg"></a>  
  78.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  79.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s4.jpg"></a>  
  80.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s5.jpg"></a>  
  81.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>  
  82.     <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>  
  83.     </div>  
  84.     </body>  
  85.     </html>  
复制代码








欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1