js 图片懒加载

一、什么是懒加载

1、当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

2、通俗一点就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径（或者不放置图片路径）；当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src；

这就是图片的懒加载了；

 

HTML：这里我没有给img的src图片路径，而是将图片路径给了自定义属性data-src

<div class="container">
    <img src="" alt="第1张图片" data-src="img/123.gif">
    <img src="" alt="第2张图片" data-src="img/timg.jpg">
    <img src="" alt="第3张图片" data-src="img/timg2.jpg">
    <img src="" alt="第4张图片" data-src="img/123.gif">
    <img src="" alt="第5张图片" data-src="img/timg.jpg">
    <img src="" alt="第6张图片" data-src="img/timg2.jpg">
    <img src="" alt="第7张图片" data-src="img/123.gif">
    <img src="" alt="第8张图片" data-src="img/timg.jpg">
    <img src="" alt="第9张图片" data-src="img/timg2.jpg">
    <img src="" alt="第10张图片" data-src="img/123.gif">
    <img src="" alt="第11张图片" data-src="img/timg.jpg">
    <img src="" alt="第12张图片" data-src="img/timg2.jpg">
    <img src="" alt="第13张图片" data-src="img/123.gif">
    <img src="" alt="第14张图片" data-src="img/timg.jpg">
    <img src="" alt="第15张图片" data-src="img/timg2.jpg">
    <img src="" alt="第16张图片" data-src="img/123.gif">
</div>

css:

.container {
   max-width: 800px;
   margin: 0 auto;
}
.container:after{
   content: '';
   display: block;
   clear: both;
}
.container img {
    float: left;
    width: 100%;
}
h1{
    clear: both;
}

js:

/*
------------------------------------------------------------------------------
图片懒加载
------------------------------------------------------------------------------
*/
    start()
    $(window).on('scroll', function(){
        start()
    })

    function start(){
        //.not('[data-isLoaded]')选中已加载的图片不需要重新加载
        $('.container img').not('[data-isLoaded]').each(function(){
            var $node = $(this)
            console.log(isShow($node))
            if( isShow($node) ){
                loadImg($node)
            }
        })
    }

    //判断一个元素是不是出现在窗口(视野)
    function isShow($node){
        return $node.offset().top <= $(window).height() + $(window).scrollTop()

    }
    //加载图片
    function loadImg($img){
        $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
        $img.attr('data-isLoaded', '已加载')//已加载的图片做标记
    }