图片懒加载
- 思路：起始的时候，不让图片进行加载，那么img的src属性设置为空，
src = ' ',在自定义一个属性，用来保存图片的地址data-src = "http://......jpg"，当需要图片进行加载的时候，只需要把data-src的值复制到 src里面，浏览器就会发送请求，图片就会加载。
- 图片在什么情况下加载：当滚动页面时，检查页面所有的img标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src = "http://kejian.jirengu.com/static/js/jquery-1.11.1.min.js"></script>
<style>
ul,li {
list-style: none;
}
.container {
width: 600px;
margin: 0 auto;
}
.container li {
float: left;
margin: 10px 10px;
}
.container li img {
width: 240px;
height: 180px;
}
p {
float: left;
}
</style>
</head>
<body>
<ul class = "container">
<li><a href = "#">
<img src = " " data-src = "http://pic.616pic.com/ys_img/00/05/15/O6o6biils1.jpg">
</a></li>
<li><a href = "#">
<img src = "https://img0.pcbaby.com.cn/pcbaby/1602/05/2714651_6.png" data-src = "https://img0.pcbaby.com.cn/pcbaby/1602/05/2714651_6.png">
</a></li>
<li><a href = "#">
<img src = "http://ku.90sjimg.com/element_origin_min_pic/17/06/17/8b91e3acb380d9cd4de59796f6c035cb.jpg" data-src = "http://ku.90sjimg.com/element_origin_min_pic/17/06/17/8b91e3acb380d9cd4de59796f6c035cb.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwmmA2LTpf4-LbRbH5VrAlWXoU1ieo0J7qQD_phCpmY69ErEV">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://png.pngtree.com/png-clipart/20190520/original/pngtree-cartoon-hand-drawn-lovely-yellow-shiba-inu-png-image_3817347.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "http://pic.sc.chinaz.com/files/pic/pic9/201403/apic648.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "http://pic.sc.chinaz.com/files/pic/pic9/201503/apic10256.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjoSv_GJ7qlHKCqgQjmgzyonEEgNwI7oW-G7ue_v8nSwglKoMgeA">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBLHtvr6--RugK3zz4VrlKs5wFpd1b4hyC_bAqC1ytX76VpnNG">
</a></li>
<li><a href = "#">
<img src = " " data-src = "http://img2.1sucai.com/181219/330763-1Q2191U45164.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxQLHQHsgYjR1ZYLfMEm97IGGeCLNI5P2X6vLd6LzXUGLtm84W">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/83025aafa40f4bfb926d29f2044f78f0f63618d2.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "http://i.shouchaobao.vip/d/file/20180308/e97df440935e36169428f1f6725a7ba9.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvk10qbiP0Oee1JiWVng66CJad_nU-86g4FborDuHGOXh30-SLnQ">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://png.pngtree.com/png-clipart/20190618/original/pngtree-cartoon-pink-love-little-girl-cartoon-little-girl-hand-drawn-cartoon-png-image_3926186.jpg">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZ0O9Pb6TJnGAQ8kw9CSIepuY9uYc2a0Oi5TGvmF_Y9gv7PQVk7A">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2gXdOnB2JXKtnSu8BQ-3Q1N9vgNHY82zugmEbeGvPl6n2F6HPAQ">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6coCkRXka8SrF7x9xVbOQ2lv2cJysaetITXqPrldZllIlvQlL">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4q_XJB814F5eo8rZOyDv1mqPkFKS7gOjQO7ftZRgrEB_UaBQL">
</a></li>
<li><a href = "#">
<img src = " " data-src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPejS3GaHzpbKPDR2C5NiJrTqsy76dGJXX1jFwz1tlG8dgrcz0">
</a></li>
</ul>
<script>
//先进行判断，看是否有图片出现在视野中。
lazyRender()
//滚动事件onscroll
var clock
$(window).on('scroll',function(){
//稍微滚动一下，console.log会执行很多次
//console.log('hello')
//滚动的过程中不执行，滚动停止时，最后一次滚动在触发事件。
if(clock){
clearTimeout(clock)
}
clock = setTimeout(function(){
console.log('hello')
lazyRender()
},300)
})
function lazyRender(){
//对页面上所有的img进行遍历,判断是否出现在视野
$('.container img').each(function(){
//isloaded是否被加载过
if(checkShow($(this)) && !isLoaded($(this))) {
loadImg($(this))
}
})
}
//判断一个元素是否出现在视野里
function checkShow($img) {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $img.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true
}
return false
}
//判断元素是否是加载过
//1. 判断src = data-src是否相等
//2. 给元素加一个自定义属性，判断元素是否有这个属性
function isLoaded($img){
return $img.attr('data-src') === $img.attr('src')
}
//加载图片
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
}
</script>
</body>
</html>
网友评论