作業中のサイトでIsotopeJSを使用しています。StraightAcrossレイアウトオプションを使用しています。問題は、すべての画像の読み込みが開始されてから、Isotopeが起動してレイアウトを作成することです。私はドキュメントに従っていて、両方の方法を実装しました:
http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
私のコード:
var $container = $('#container');
$container.imagesLoaded(function(){
$('#container').isotope({
layoutMode : 'straightAcross'
});
});
私も試しました:
$(window).load(function() {
$('#container').isotope({
layoutMode : 'straightAcross'
});
と
$(window).load(function() {
var $container = $('#container');
$container.imagesLoaded(function(){
$('#container').isotope({
layoutMode : 'straightAcross'
});
});
});
ストレートアクロスレイアウトを使用しているので、ジャンプはかなり耳障りです。どんな助けでもいただければ幸いです。
編集追加された開発リンク:
http://66.214.147.58/tracey_dev/
編集2
この問題のビデオを作成しました。
最初は、コンテナよりも大きい画像が積み重ねられて読み込まれ始めます。それらがロードされると、Isotopeが起動してレイアウトを作成し、画像をコンテナに合わせてサイズ変更し、水平に配置します。
このサイトはサイズ変更可能になるため、画像は品質を維持するために大きな形式で保存されます。サーバーから大きな画像をロードするように画像を更新しました。
Isotopeスクリプトが起動するまで画像を表示しないようにします。
編集3
OK、imagesLoadedが何をするのか理解できたと思います。画像をプリロードして、完了するまで非表示にしてから、Isotopeをトリガーします。これは、私が行っている印象を受けたものです。この問題を回避するために私がしたことは、ドキュメントの準備ができたときにhide()を追加し、次にwindow.loadにshow()を追加することです。これは私のファイルサイズと読み込みの問題を解決していません(私が進むにつれてそれを解決しません)が、ジャンプの問題は解決しました。ご入力いただきありがとうございます。これが機能する私のコードです。
<!-- Hides the container for loading -->
<script>
$(document).ready(function() {
$('#container').hide();
});
</script>
<!-- Isotope Script -->
<script>
$(window).load(function() {
// set panels equal to window size
setSectionSize();
$(window).resize(function(){
setSectionSize();
});
// function to set panels to window size
function setSectionSize(){
var windowHeight = $(window).height()-170;
//resize section containing image
$('#container').css({'height':windowHeight+'px'});
};
/* Load Isotope */
var $container = $('#container');
$container.imagesLoaded(function(){
$container.show();
$container.isotope({
layoutMode : 'straightAcross'
});
});
});
</script>
ありがとうございました。