砌體Rails中框有時不刷新

的頁面中，我遇到的問題與上對齊：http://forkfox.com/tours 砌體Rails中框有時不刷新

如果刷新頁面有足夠的時間，通常甚至是第二次或第一頁加載時，您會看到一些框相互重疊。

的JS

var container = document.querySelector('#alltours'); 
var msnry = new Masonry(alltours, { 
    // options 
    itemSelector: '.box', 
});

讓我知道如果你需要任何其他信息，以幫助解決這個問題。

謝謝！

編輯1：我已添加imagesLoaded，因爲它是建議在下面，但我似乎仍然有同樣的問題。

// or with jQuery 
// initialize Masonry 
var $container = $('#alltours').masonry(); 
// layout Masonry again after all images have loaded 
$container.imagesLoaded(function() { 
    $container.masonry(); 
});

來源

2013-10-09 Michael

你在瀏覽什麼？我在OSX上看不到使用邊緣FF/Chrome的任何問題。 – zeantsoi

@zeantsoi看起來Chrome導致了這個問題。我在Firefox上看不到問題。另一臺使用Chrome的計算機也看到了相同的結果。 – Michael

剛剛在Firefox和相同的問題上嘗試過。奇怪的是，它只是偶爾出現。 – Michael

這可能是Chrome積極緩存的一個問題。你可能想看看https://github.com/desandro/imagesloaded。

imagesLoaded(document.querySelector('#alltours'), function(instance) { 
    // Call Masonry here... 
});

但既然你已經使用jQuery：

$('#alltours').imagesLoaded(function() { 
    // Call Masonry here... 
});

讓我知道它是什麼幫助。

來源

2013-10-13 02:50:56 Erol

這似乎沒有工作。我確信它與Chrome無關，因爲問題似乎在所有瀏覽器中都會發生。 – Michael

也許我正在寫jQuery Masonry錯誤。你能舉個例子嗎？ – Michael

很難告訴給你縮小的JS文件，但你是否將圖像加載到資產管道中？調用imagesLoaded（...）導致「ReferenceError：imagesLoaded未定義」 – Erol

你得在頁面上此錯誤：遺漏的類型錯誤：對象的翻譯：有沒有方法「imagesLoaded」

首先要做的實際上是包括在腳本imagesLoaded加載： http://desandro.github.io/imagesloaded/

下載並使用標籤包含它。它在最近的一個版本中停止作爲砌體的一部分。此外，我會從您的.box div中移除浮動，並允許Masonry控制定位。由於砌體將絕對位置您的浮動沒有任何影響。

.thumbnaila { 給出了顯示類型的塊。可能導致錯誤計算的高度。

來源

2013-10-14 23:05:42 hooflung

我修復了Uncaught TypeError的問題。不幸的是，這並沒有解決問題。我也刪除了float並添加了display：block。 – Michael

我撒謊。實際上，即使該問題已添加到資產管道中，問題仍然存在。 – Michael

我再次撒謊。其中一個問題（與application.js中沒有包含它一起）是它被調用的順序。這就是我所做的。 '// = require jquery // = require masonry.pkgd.min.js // = require imagesloadedloaded.pkgd.js // = require box.js' – Michael

砌體Rails中框有時不刷新

回答

相關問題