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

Use lazy loading as a animated effect with every scrolling?

本文关键字：滚动 动画 延迟加载      更新时间：2023-09-26

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

我想要实现的是，每次我在上下方向滚动网页时都要有一个淡出效果，但根据延迟加载的默认操作是，它在滚动图像后只加载图像一次，一旦图像加载，就不会发生淡出效果。有没有什么方法可以让我们每次在图像上任意方向滚动时都有渐变效果?我想用延迟加载技术实现类似这个网站的动画。

下面是我的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>

试试这个，这是一个jQuery函数。希望这将工作。

$( ".img-col" ).mouseenter(function() {
  put your code load over here.
});
相关文章：