Question

我正在为一位设计师工作，他创造了一个只有一个动画周期的GIF。这个gif实际上出现在滚动页面的一半左右，即它从屏幕开始，所以当你到达那里时动画已经被触发了。

我创建了这个GIF的两个版本，一个是启动状态，另一个是动画版本。

我想要它，以便当用户向下滚动页面时，动画GIF在适当的时间加载（即，当它在屏幕上时），然后将动画版本加载到随后播放的DOM中

我尝试过使用scrollspy，但这只会延迟图标的显示，而不是实际加载，所以当用户向下滚动时，动画已经过去了。

有可能吗？我的常识告诉我，这甚至不值得开发时间，因为它甚至不是那么重要的动画，而且应该像大多数普通的GIF一样循环，但是......好吧......那就是你的设计师！

静态版本= step_4.gif
动画版= step_4_b.gif

全部封装在

中

预先感谢任何帮助

注意：使用下面的答案，这是我的工作代码（需要整理，插件已安装）

jQuery(document).ready(function($) {

window.onscroll = function() {
if($("#printer_animated_image").visible()) { //this determines if the element is visible
$("#printer_animated_image").attr("src", "images/modules/how_it_works/step_4_b.gif"); //this sets the image source
}
}


});

</script>

Answer 1

This is what you are looking for

您可以从该站点下载jquery插件，然后编写一个onscroll处理程序，如下所示：

window.onscroll = function() {
    if($('#element').visible()) { //this determines if the element is visible
        $('#element').attr("src", "step_4_b.gif"); //this sets the image source
    }
}

在上面的#element需要替换为图像的ID。

此外，如果您不想为单个图像安装插件，JQuery具有类似的内置功能，但并不复杂：

window.onscroll = function() {
    $('#element:visible').attr("src", "step_4_b.gif");
}

同样的事情，但如果使用CSS使图像不可见，则在此版本中仍然可以看到它。

Answer 2

首先，最好预先加载动画gif：https://stackoverflow.com/a/14390213/104380

然后，您必须检查用户是否可以看到GIF所在的DOM元素。您只需在每个滚动条上检查elm.getBoundingClientRect().top < 0，然后将该GIF图像注入其中。

var elm = getElementById('#elm');
$(window).on('scroll.reached', placeLoadingGIF);

function placeLoadingGIF(){ 
   if( elm.getBoundingClientRect().top < 0 ){
       var img = new Image();
       img.src = 'step_4_b.gif';
       elm.appendChild(img);
       $(window).off('scroll.reached');
   }
}

这种东西。

延迟加载GIF

2 个答案: