0

ドキュメントの準備ができた後に画像をロードするプラグインがあります。

それが機能するために、画像ソースは次のようになります：

スクリプトは、画像が読み込まれるまでloader.gifを表示し、そのgifをthe_actual_image.jpgに置き換えます。

これが私が関数を呼び出す方法です：

function mylazyload() {
    $("img.lazy").show();
    var timeout = setTimeout(function(){$(".models img.lazy").lazyload({effect : "fadeIn"})}, 800);
}

mylazyload（）の後に呼び出すサイズ変更関数があります。働き：

jQuery(document).ready(function($){      
    mylazyload();
    resize_images();
});

サイズ変更機能は次のとおりです。

function resize_images() {
    var maxHeight = $(".defx img").height();
    $(".model img.lazy").each(function() {
        var $this = $(this);
        if ($this.height() > maxHeight || $this.height() < maxHeight) {
            $this.removeAttr('style').css("height","auto");
            $this.css('height', maxHeight);
        }
    });
}

問題は、サイズ変更機能がloader.gifで機能しているように見え、the_actual_image.jpgのサイズを変更していないことです。

なぜ何かアイデアはありますか？

4

2 に答える 2

1

1：

遅延読み込みは非同期であり、タイムアウトが発生します。したがって、このように呼び出す場合：

lazyload();
resize();

サイズ変更機能は、lazyloadがトリガーされる前に実行されます。

2：

もし、するなら：

setTimeout(
   function() {
    $(".models img.lazy").lazyload({effect: "fadeIn"});
    resize();
   },
   800
);

ローカルホストでは機能すると思いますが、ブラウザは画像を非同期で読み込むため、本番環境では機能しません。

3：

したがって、必要なのはlazyload関数のコールバックです。使用するライブラリには、次のように実装されている可能性があります。

$(".models img.lazy").lazyload({
      effect: "fadeIn",
      callback: resize()
});

確信はないけど。それを探す必要があります。見つからない場合は、独自の遅延読み込みを作成するか、別のライブラリに変更してください。

4：

あなたが見つけた応答に基づいて：

setTimeout(
    function() {
        $(".models img.lazy").lazyload({
            effect: "fadeIn",
            load: function () {
                resize_images();
            }
        });
    },
    800
);
于 2012-09-05T22:02:01.607 に答える
-1

画像はまだDOMReadyステートメントにロードされていません。

タイムアウトにもサイズ変更を追加してみてください。

setTimeout(function(){$(".models img.lazy").lazyload({effect : "fadeIn"});
resize_images();
}, 800);
于 2012-09-05T22:01:22.837 に答える