Grid-а-Licious плагин мерцает на JQuery Mobile странице загрузки

Question

Моя цель:

Использование JQuery плагин grid-a-licious для отображения Pinterest-как сетки, внутри страницы JQuery Mobile. Когда страница загружается, изображения должны быть расположены в сетке.

The (не удалось) результат:

код я придумал проиллюстрирована здесь: http://jsfiddle.net/hxNDE/6/

В основном, я использую событие pageshow JQM для активации Grid-а-Licious. Он работает, НО, есть главная мерцающий в связи с переходом страницы:

$('#page-2').on('pageshow', function() { 
    $("#grid").gridalicious({ 
     gutter: 1, 
     width: 100 
    }); 
}); 

Когда я использую pagebeforeshow событие вместо этого, он не работает на всех, потому что Grid-а-Licious не может обнаружить ширину экрана и решить сколько столбцов строить:

$('#page-2').on('pagebeforeshow', function() { 
    ...same... 
}); 

Текущий обходной путь: Я отключил все анимации JQM перехода, так что нет никакого видимого мерцания, когда изображения располагаются в сетке.

Я хотел бы найти решение, где я могу использовать переход JQM и Grid-a-licious без мерцания.

• Найдя путь в JQM
• или путем изменения сетки-а-Licious плагин, который является довольно коротким, чтобы преодолеть эту ситуацию

Есть предложения?

Answer 1

Я сосредоточил свой вопрос, и вытащил исправление на Grid-A-Licious репозиторий:

https://github.com/suprb/Grid-A-Licious/pull/22

В принципе, ширина была неправильно рассчитана, когда CSS display был скрыт или, ну, не в его нормальное состояние

var swappedStyle = this.box.css('display'); 
this.box.css('display', 'block'); 
width = this.box.width(); // Previously, only this line 
this.box.css('display', swappedStyle); 

Примечания:

• Это не позволяет JQuery Mobile переходов, а просто получает Гри-A-Licious может использоваться с JQM
• включены также исправления для IOS устройств, которые вызывают много события изменения размеров, следовательно, делают Gridalicious мерцания и прокрутку вверх