JQuery/lazyLoading/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="index.css">
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    </head>
    <body>
    	<div class="container">
            <ul class="clearfix">
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="https://imgsa.baidu.com/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=3682361ff4faaf5190ee89eded3dff8b/cdbf6c81800a19d844a71a3c3afa828ba61e4667.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></a></li>           
        </ul>
    </div>
    <script type="text/javascript">
        var $img = $('.container img') 

        checkImg();
        $(window).on('scroll',checkImg);
        
        function checkImg(){
            $img.each(function(){
                if(isVisible($(this))){
                    showImg($(this))
                }
            })
        };

        function showImg($node){
            $node.each(function(index, el) {
                var dataSrc = $(this).attr('data-src');
                $(this).attr('src',dataSrc);
                $(this).add('load');
            });
        };

        function isVisible($node){
            var windowH = $(window).height();
            var scrollTop = $(window).scrollTop();
            var offset = $node.offset().top;
            var nodeH = $node.outerHeight(true);

            if(windowH + scrollTop > offset && offset + nodeH > scrollTop){
                return true;
            }else{
                return false;
            }
        };
    </script>
    </body>
</html>