我们有一个使用我们网站上的同位素库创建的工作组合。
文库同位素: https://github.com/metafizzy/isotope
问题在于,使用 Chrome 桌面浏览器或 Safari iOS 浏览器(例如),当您刷新网站并且该网站已被浏览器缓存在本地内存中时,网格会消失.
如果您停用浏览器中的缓存,问题就会消失,但这不是解决方案。
我搜索并尝试了很多方法,例如向 .js 库添加随机版本字符串(?v=[RAMDOM),但它不起作用,它一定是其他东西。
使用最新版本的 Firefox,这种情况不会发生在我身上。
最佳答案
对于从缓存加载的图像,不会触发.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();
}
});
关于javascript - Google Chrome 的缓存破坏了我的 Isotope Javascript 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47479036/