按需加载-白红宇

按需加载

阅读量：5174 次

发布时间：2019-06-13

本文共 1639 字，大约阅读时间需要 5 分钟。

48 49 50 51     
     52     按需加载53     57 58 59     
     
      60         
      
61         
      
62         
      
63         
      
64         
      
65         
      
66     
     
67     68     93 94

<!DOCTYPE html>
<html lang=
"en"
>
<head>
    
<meta charset=
"UTF-8"
>
    
<title>按需加载</title>
    
<style type=
"text/css"
>
        
*{list-style:none;}
        
li{width:300px;height:250px;border:solid 1px
 
#333;padding:10px;margin-bottom:10px;}
    
</style>
</head>
<body>
    
<ul>
        
<li><img srcImg=
"./sunli/1.jpg"
 
src=
""
 
alt=
""
 
width=
"100%"
></li>
        
<li><img srcImg=
"./sunli/2.jpg"
 
alt=
""
 
width=
"100%"
></li>
        
<li><img srcImg=
"./sunli/3.jpg"
 
alt=
""
 
width=
"100%"
></li>
        
<li><img srcImg=
"./sunli/4.jpg"
 
alt=
""
 
width=
"100%"
></li>
        
<li><img srcImg=
"./sunli/5.jpg"
 
alt=
""
 
width=
"100%"
></li>
        
<li><img srcImg=
"./sunli/6.jpg"
 
alt=
""
 
width=
"100%"
></li>
    
</ul>
    
<script type=
"text/javascript"
 
src=
"jquery-1.8.3.min.js"
></script>
    
<script type=
"text/javascript"
>
    
$(window).scroll(
function
(){ 
        
$(
'li[isLoaded!=1]'
).each(
function
(){ 
            
//如果存在当前isloaded属性 直接返回
            
// if($(this).attr('isLoaded')) return;
            
//页面的y轴滚动距离
            
var
 
sT = $(window).scrollTop();
            
//页面可视区域的高度
            
var
 
CH = $(window).height();
            
//获取当前元素距离文档顶部的偏移量
            
var
 
OT = $(
this
).offset().top;
            
//如果图片即将要展现在屏幕上的话
            
if
(OT < sT + CH){ 
                
//获取当前li中img的src属性值
                
var
 
src = $(
this
).find(
'img'
).attr(
'srcImg'
);
                
//设置src属性
                
$(
this
).find(
'img'
).attr(
'src'
,src);
                
//加载完毕之后添加属性 做标识
                
$(
this
).attr(
'isLoaded'
,1);
            
}
        
})
    
})
    
</script>
</body>
</html>