滚动时加载图像

Question

我在滚动时使用它来显示 gif :

<img class="gif-load1" src="<?php bloginfo('template_directory'); ?>/img/nos-services-title.gif" data-small="<?php bloginfo('template_directory'); ?>/img/white-service.jpg" />


<script type="text/javascript">             
var largeImage = $('.gif-load1').attr('src');
            var smallImage = $('.gif-load1').attr('data-small');

            $(window).bind('scroll', function() {
                if ($(window).scrollTop() > 300) {
                    $('.gif-load1').attr('src', smallImage);

                } else {
                    $('.gif-load1').attr('src', largeImage);

                }
            });
</script>

滚动时出现问题，gif display/hide/display/hide

我不知道为什么。 :(

这是网站：http://www.groupensci.com/agencen/

迷路了。请需要帮助

Answer 1

图片是否已经载入，你不测试一下吗？

这只是一个猜测，但根据我的阅读，每次发生滚动时都会触发 "Scroll"。不只是从某人开始滚动或完成滚动。

据我所知，您要求浏览器一直获取图像。我会添加，以测试，看看它是否有所作为：

$(window).bind('scroll', function() {
                if ($(window).scrollTop() > 300) {
                  if($('.gif-load1').attr('src')!=smallImage) 
                    $('.gif-load1').attr('src', smallImage);
                } else {
                   if($('.gif-load1').attr('src')!=largeImage)
                    $('.gif-load1').attr('src', largeImage);

                }
            });

滚动时加载图像

Load image when i scroll

jquery

scroll

gif