Google Chrome的缓存会破坏我的Isotope Javascript网格

Question

我们在我们的网站上使用库Isotope创建了一个工作组。

网站： 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();
                }
            });