7

問題を明らかにする前に覚えておくべき2つのこと：1。私はプログラマーではないので、自分がしていることについてのアイデアがありません。 1.）

了解しました。サイトの設定方法には約100万の問題がありますが、現在、IsotopeをLazyloadで動作させようとしています。私はおそらくこの問題に関するすべてのスタックオーバーフローを読んだことがありますが、これまでのところ問題を解決することはできませんでした。私はCMSとしてStaceyを使用しています。基本的に、私が達成しようとしているのはxxx.aestheticallyloyal.com（または実際にはwww.imageworkshop.com/lazyload-portfolio）に似ていますが、クリック可能なサムネイルがそれぞれのプロジェクトページで開くIsotope/Masonryスタイルに配置されています。Infinitescrollを機能させようとしましたが、Staceyでページ付けがサポートされているかどうかがはっきりとわからないため、あきらめました。Lazyloadと入力します。

Isotopeを正常に動作させました。Lazyloadを個別に正常に動作させることができます。しかし、私が2つを混ぜ合わせようとするときはいつでも、私は惨めに失敗します。問題は、画像が完全に読み込まれる前にIsotopeによって整理されるため、実際のサイズ（可変）に従って整列されず、固定の幅と高さを取得することです（固定の幅で問題ありませんが、それがポイントですが、高さはそれに応じてスケーリングする必要があります）。ただし、その後ウィンドウのサイズを変更すると、それに応じてグリッドが調整されます。

これは私が使用しているコードです：

    <script>
$(function () {
    var $window = $(window);
    var $container = $('#container');
    var $imgs = $("img.lazy");

    $imgs.lazyload({
        event: 'scroll',
        effect: 'fadeIn',
        failure_limit: Math.max($imgs.length - 1, 0),
        appear: function () {}
    });

    $(function () {
        $container.imagesLoaded(function () {
            $container.isotope({
                onLayout: function () {
                    $window.trigger("scroll");
                },
                itemSelector: '.photo'
            });
        });
    });

    $window.load(function () {
        $container.isotope('reLayout');
    });
});
    </script>

それはおそらく多くの点で間違っています...私は知りません。さらに、現状では、reLayoutはまったく何もしていないと思います。そこから、とにかくどこに行けばいいのか本当にわかりません。誰かが私のサイトflow.blukaet.comを見て、この混乱を分類する方法を教えてもらえますか？（左側のメニューは気にしないでください、私はそれを見始めていません）。ありがとう。

更新＃1

Fasterizeと呼ばれる別のLazyloadスクリプトを使用しようとしています。物事はほんのわずかにうまくいくように見えますが、私はまだ折り目の下に表示される画像を正しい方法で表示するのに問題があります。基本的に、ビューポートに読み込まれるものはすべてIsotopeによって正しく並べ替えられますが、残りの画像は実際の最終的な表示サイズに基づいて追加されません。新しいアイテムがロードされた後に再配置するために、Isotopeで何かをトリガーする必要があります。それが可能かどうかはわかりません。誰か助けてもらえますか？何が起こっているかを確認できるサイトは次のとおりです：flow.blukaet.com（上記のコードは実際のものではなくなりました）。

更新＃2

したがって、これは以下の回答のおかげで修正されたコードです（また、これはappelsiiniのlazyloadではなくfasterize / lazyloadを使用しています）：

<script>
$(window).load(function () {

var $container = $('#container');
var $imgs = $("img");

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.photo'
    });
});

$(window).scroll(function () {
    $container.isotope('reLayout');
});
});
</script>

それは非常にスムーズではありませんが、それは仕事を成し遂げます。

以前、私は次のようなことを試みました。

<script>
$(function () {

var $container = $('#container');
var $imgs = $("img");

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.photo'
    });
});

$imgs.load(function () {
    $container.isotope('reLayout');
});
});
</script>

これは実際にははるかにスムーズに実行されましたが、どういうわけか次のコンソールエラーが発生していました。

初期化の前に同位体のメソッドを呼び出すことはできません。メソッド'reLayout'を呼び出そうとしました

だからわかりません。

注意すべきもう1つの点は、コードがFFとOperaで機能することです。どうやらSafariは遅延読み込みを完全に無視しているようです。ChromeとIEではテストしていません。誰かがチェックアウトしたい場合：flow.blukaet.com

4

3 に答える 3

6

ハザ！最終的な勝者はいると思います。私が見つけた半分の解決策をもう少しいじくり回しました—試行錯誤を通して、私が何をしているのかまだ手がかりがないので、気に留めてください—そして私はついにこれを正しくしたと思います。コンソールは初期化エラーを返さなくなり、コードは多かれ少なかれ正しく動作しているようです（私は思いますか？！）。

<script>
$(document).ready(function () {

    var $container = $('#container');
    var $imgs = $("img");

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.photo'
        });
        $imgs.load(function () {
            $container.isotope('reLayout');
        }); 
    });
});
</script>

したがって、「reLayout」はスクロールでは発生しませんが、画像が読み込まれるときに、スクロールが完全に実行されない場合でも、画像がスタックすることはありません。

SafariではLazyloadはそれでもやりたいことを何でもします、そしていつものように私はChromeとIEでテストすることができませんでした、しかしFFとOperaではそれは大丈夫のようです。実用的な例については、flow.blukaet.comを確認してください。

于 2013-02-17T23:51:39.217 に答える
3

レスポンシブグリッドでも同じ問題があります。この画像を確認してください。左側はグリッドに問題がなく、右側は壊れています。

ここに画像の説明を入力してください

画像に特定の高さが必要であり、レスポンシブプロセスが高さの値を「自動」に渡すため、グリッドが壊れています。

したがって、ここでは、画像が読み込まれたときにリレーアウトする必要があります（処理する特定の高さを指定します）。

今のところ私が見つけた解決策は、scroolでリレーアウトすることです：

$(window).scroll(function() {
        $container.isotope('reLayout');
});

しかし、これを行うためのより良い方法があると確信しています。

そして、グリッドにフリータイルを試してみてください。他のグリッドよりも素晴らしくて軽いことがわかりました。 http://yconst.com/web/freetile/

于 2013-02-17T20:24:08.123 に答える
0

同じ問題があり、解決できませんでしたが、それは単なる警告であることに気づきました。そのため、ファイル「jquery.isotope.min.js」（またはjquery.isotope.js）のコンソールログ行をコメント化して無効にしました。

var logError = function( message ) {
  if ( window.console ) {
    //window.console.error( message );
  }
};
于 2013-08-21T15:02:35.460 に答える