レイジーロードの作り方・・・画像が表示範囲に入ったかの記述がわからないです。

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
jQuery/Jsで作成

###発生している問題・エラーメッセージ
animeteメソッドしか効いていない・・・・

それに加えて、画像が表示範囲に入ったかの記述がわからないです。
$(window).scrollTop();
$(window).scrollTop() + $(window).height();
$(window).scrollLeft();
$(window).scrollLeft() + $(window).width();
を使うのはわかっているのですが記述の仕方がよくわからなくて。。。

###該当のソースコード
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        .container{
            list-style: none;
        }
        .container li{
            width: 256px;
            height: 256px;
            margin: 100px auto;
            border: dotted 1px #808080;
            background-image: url("img/loading.gif");
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
        .container li img{
            opacity: 0;
        }
    </style>
</head>
<body>
<ul class="container" id="container">
    <li><img data-url="img/animal1.jpeg" src="./img/animal1.jpeg" /></li>
    <li><img data-url="img/animal2.jpeg" src="./img/animal2.jpeg" /></li>
    <li><img data-url="img/animal3.jpeg" src="./img/animal3.jpeg" /></li>
    <li><img data-url="img/animal4.jpeg" src="./img/animal4.jpeg" /></li>
    <li><img data-url="img/animal5.jpeg" src="./img/animal5.jpeg" /></li>
    <li><img data-url="img/animal6.jpeg" src="./img/animal6.jpeg" /></li>
    <li><img data-url="img/animal7.jpeg" src="./img/animal7.jpeg" /></li>
    <li><img data-url="img/animal8.jpeg" src="./img/animal8.jpeg" /></li>
    <li><img data-url="img/animal9.jpeg" src="./img/animal9.jpeg" /></li>
    <li><img data-url="img/animal10.jpeg" src="./img/animal10.jpeg" /></li>
</ul>
</body>
<script type="text/javascript">
    var $container = $('.container');
    $(window).on('resize scroll',function(){
        if($(window).scrollTop()>=$(window).scrollTop()+$(window).height()<=$(window).scrollLeft()){
            $('.container li img').animate({'opacity':1},2000);
        }
    });
</script>
</html>