Javascript 当GIF加载到页面时，具有相同URL的所有其他GIF将从头开始播放

我想让GIF真正出现在屏幕上后才开始播放。我提出了一个小的JS脚本，它基本上会在图像出现在显示器上时用实际的gif替换静态图像（gif的第一帧）

因为我在CMS工作，所以我不能在HTML部分做太多改变

HTML:

JS:

var lazies=$（'.lazy'）；
lazies.each（函数（）{
var src=$（this.find（'img'）.eq（1）.attr（'src'）；
if（$（this）[0].offsetTop=$（this）[0].offsetTop&&！$（this）.hasClass（'lazyactive'））{
var src=$（this.find（'img'）.eq（1.attr（'src'））
$（this.addClass（'lazyactive'）；
$（this.find（'img'）.eq（0）.attr（'src'，src）；
$（this.find（'img'）.eq（1.hide（）；
}
})
}

只要页面上有不同的GIF，代码就可以正常工作。 但一旦我在页面上多次出现相同的GIF，我就有问题了。每次一个PNG被GIF替换（通过向下滚动），每个GIF从一开始就开始播放

---

我不确定这是浏览器的正常行为还是脚本中有错误。

我猜这是因为浏览器缓存了图像；解决这个问题的一种方法是通过添加一个随机参数使URL唯一：

/somegif.gif？a

，然后为下一个添加

/somegif.gif？b

，依此类推。我看不出延迟加载程序有什么意义-因为dom中有两个图像，所以这两个图像都会被加载，因此通过添加额外的图像实际上会降低页面的速度。此外，大多数惰性加载程序使用相同的图像（而不是第一帧），因此在屏幕关闭时（您看不到）只加载一个图像，这意味着将有更少的请求EAH，但这是一个简单的修复方法。只需使用

data src

来存储GIF的

src

（和一张图像），我不能（不想）使用data src，因为我在CMS中工作。我希望其他用户使用现有的CMS组件“重建”html（我不能添加自定义标记），然后在页面上包含我的JS脚本。：）@Pete你是对的，它不是一个懒惰的加载程序，我使用它是因为GIF应该只播放一次而不循环。因此，如果我只在页面底部添加GIF，当用户到达那里时，GIF已经完成了所有准备就绪的播放

<div class="lazy">
    <img src="firstframe.png">
    <img src="gif.gif">
</div>

var lazies = $('.lazy');
lazies.each(function(){
    var src = $(this).find('img').eq(1).attr('src');
    if($(this)[0].offsetTop <= window.innerHeight && !$(this).hasClass('lazyactive')){
        $(this).find('img').eq(0).attr('src', src);
        $(this).find('img').eq(1).hide();
        $(this).addClass('lazyactive');
    }
})

window.onscroll = function(){
    lazies.each(function(i){
        if(window.pageYOffset + window.innerHeight >= $(this)[0].offsetTop && !$(this).hasClass('lazyactive')){
            var src = $(this).find('img').eq(1).attr('src')
            $(this).addClass('lazyactive');
            $(this).find('img').eq(0).attr('src', src);
            $(this).find('img').eq(1).hide();
        }
    })
}