谷歌浏览器的缓存破坏了我的同位素Javascript网格

Question

我们在我们的网站上使用库同位素创建了一个工作组合。

网站： https://www.beedit.es

库同位素： https://github.com/metafizzy/isotope

问题在于，使用Chrome桌面浏览器或Safari iOS浏览器（例如），刷新网站，并且它已被浏览器在本地内存中缓存，网格消失了。

如果您将浏览器中的高速缓存停用，则该问题消失了，但不是解决方案。

我已经搜索并尝试了很多东西，例如在.js库中添加一个随机版本字符串（？v = [ramdom），但它不起作用，它一定是其他的。

使用最新版本的Firefox，它不会发生在我身上。

解释视频： https://youtu.be/hhud_1scbx8

Answer 1

.load事件不会为从缓存加载的图像发射。

您可以使用

来解决该问题

    $('#work-container > article > img').one('load',function(){
                $('.isotope-item').show();
                $('.img-wait').fadeIn('fast');
                $('#work-container').isotope({
                    itemSelector: '.isotope-item',
                    layoutMode: 'masonry',
                    resizesContainer: true,
                    masonry: {
                        columnWidth: 300,
                        isFitWidth: true
                    }
                });
            }).error(function(){
            }).each(function(){
                if(this.complete) {
                    $(this).load();
                }
            });