返回> 网站首页 

页面延迟加载代码,加载当前屏幕信息

yoours2014-04-23 11:23:49 阅读 1582

简介一边听听音乐,一边写写文章。

 HTML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 先下载通用JS
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
 var $winH = $(window).height();//获取窗口高度
 var $img = $("#show img");
 var $imgH = parseInt($img.height()/2);//图片到一半的时候显示
 var $srcDef = "a.gif";
 runing();//页面刚载入时判断要显示的图片
 //****************************************
 $(window).scroll(function(){
  runing();//滚动刷新
 })
 //****************************************
 function runing(){
  $img.each(function(i){//遍历img
   var $src = $img.eq(i).attr("original");//获取当前img URL地址
   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);//元素属性的交换
   }
  })
 }
})
</script>

<div  id="show">
页面内容
<div>
微信小程序扫码登陆

文章评论

1582人参与,0条评论