Google chrome 的缓存破坏了我的同位素 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();
                }
            });

Google chrome 的缓存破坏了我的同位素 Javascript 网格

Google chrome's cache breaks my Isotope Javascript grid

javascript

google-chrome

caching

jquery-isotope