Dai Chong's blog

最近突发奇想，想优化web网站。我是一个后端程序员，但对js很感兴趣，之前总听说图片懒加载可以优化网站，本来以为是很难得技术，今天亲手试了一下才发现是如此简单。下面为大家奉上我的代码！

1
alert('Hello Welcome to DaiChong.Blog!');

[首先是html部分]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
*{
 padding:0;
 margin:0;
 list-style:none;
}
img{
 height:200px;
 width:100%;
}
</style>
<ul>
 <li><img src='1.png'></li>
 <li><img src='1.png'></li>
 <li><img src='1.png'></li>
 <li><img src='1.png'></li>
 <li><img src='1.png'></li>
</ul>
[juqery部分]
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
<script>
 $(function(){
     //代替数据
     var arr = ['./1.jpg','./01.png','./02.png','./03.png','./03(1).png','./客房1.png','./客房2.png'];
     var str = "";
     $.each(arr,function (k,v) {
         str+='<li><img data-src="'+v+'"></li>';
     })
     $("ul").html(str);
     //初始化一次
     load_img();
  })
    $(window).scroll(function(){
        load_img();
    })
  function load_img(){
        //可视区域的高度
        var view_height = $(window).height();
        //滚动条的高度
        var scroll_top = $(window).scrollTop();
        $('ul li img').each(function(k,v){
            var top = $(v).offset().top-scroll_top;
            if(top<view_height){
                $(v).attr('src',$(v).attr('data-src'));
            }
        })
    }
</script>

 上一页

Linux

 评论