javascript - 使用延迟加载作为每次滚动的动画效果？

Question

我正在使用本网站中描述的延迟加载 jQuery 脚本:http://www.appelsiini.net/projects/lazyload

我想要实现的是每次我向上和向下滚动网页时都有一个淡入淡出效果但是根据延迟加载默认操作是它只在滚动图像后加载一次图像并且一次加载图像时没有出现淡入效果。 有没有什么办法可以让我们每次在任一方向滚动图像时都能产生淡入效果？ 我想实现类似于this website的动画使用延迟加载技术。

这是我的 HTML 和脚本代码:

<div class="img-col">

        <div class="banner">    
            <img src="lazyeffect.jpg" data-original="obanner1.jpg" class="lazy" width="400" height="194" alt="time of day">
        </div> 

        <div class="banner">    
            <img src="lazyeffect.jpg" data-original="obanner1.jpg" class="lazy" width="400" height="194" alt="time of day">
        </div> 

        <div class="banner">    
            <img src="lazyeffect.jpg" data-original="obanner1.jpg" class="lazy" width="400" height="194" alt="time of day">
        </div> 
    </div> 

      <script src="jquery-1.11.3.min.js"></script>
      <script src="lazyjs.js"></script>

       <script type="text/javascript">
            $("img.lazy").lazyload({
                effect: "fadeIn",
                event: "delay"
            });   

            $(window).bind("load", function(){
                var timeout= setTimeout(function(){
                    $("img.lazy").trigger("delay")
                }, 1000);

            });
        </script>

Answer 1

试试这个，这是一个 jQuery 函数。希望这会奏效。

$( ".img-col" ).mouseenter(function() {
  put your code load over here.
});