javascript - Google Chrome 的缓存破坏了我的 Isotope 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();
                }
            });